Files
orisoxin/assets/scss/_pages.scss
T
2024-10-10 21:57:37 +03:30

4976 lines
107 KiB
SCSS

///////////////////////////// error page
.error--page {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
h1 {
font-family: sans-serif;
font-size: 60px;
}
p {
text-transform: uppercase;
font-family: sans-serif;
font-size: 14px;
margin-top: -20px;
}
a {
margin-top: 20px;
font-family: 'sahel', sans-serif;
}
}
//------------------------------- Home Page --------------------------------
.home-Page {
background-color: #000000;
/*-------------------------------- Breaking News-----------------------------------*/
.breaking-news {
//height: 4vh;
//background-color: #f4f4f4;
padding: 5px 0;
background-color: rgba(#000, 0.7);
#newsSlider {
padding: 0 20px;
.slide {
.news-link {
display: flex;
align-items: center;
justify-content: center;
@media (max-width: 800px) {
display: block;
align-items: center;
}
span {
color: #fff;
margin: 0 10px;
@extend %defaultTransition;
@media (max-width: 800px) {
text-align: center;
display: none;
}
}
h4 {
color: #fff;
@extend %defaultTransition;
@media (max-width: 800px) {
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
p {
color: #fff;
white-space: nowrap;
max-width: 500px;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
@extend %defaultTransition;
@media (max-width: 800px) {
text-align: center;
max-width: 100%;
}
}
&:hover {
h4 {
color: $red;
}
p {
color: $red;
}
span {
color: $red;
}
}
}
}
}
}
._breaking-news {
overflow: hidden;
position: fixed;
top: 57.5px;
right: 0;
left: 0;
z-index: 4;
@media (max-width: 992px) {
top: 0;
}
}
/*-------------------------------- Section 1 -----------------------------------*/
.s1-Img-BG {
height: 94vh;
overflow: hidden;
.parallax {
margin-top: -22px;
#homeSlider {
//height: 100vh;
.slick-list {
height: 100%;
img {
width: 100%;
height: 100vh;
object-fit: cover;
background: rgba(0, 0, 0, 0.5);
}
.bg {
display: flex;
width: 100%;
height: 100vh;
object-fit: cover;
//position: absolute;
//top: 0;
//left: 0;
}
}
}
.container {
//max-width: 1250px !important;
.test {
width: 100%;
height: 100vh;
background: rgba(0, 0, 0, 0.2);
position: absolute;
left: 0;
top: 0;
}
.s1 {
padding-top: 11%;
position: absolute;
top: 0;
left: 8%;
&:lang(fa) {
padding-top: 30% !important;
right: 8%;
}
@media (max-width: 576px) {
padding-top: 40%;
}
.s1-Title {
font-size: 80px;
font-weight: bold;
color: rgba(#fff, 0.7);
text-transform: uppercase;
margin-bottom: 15px;
&:lang(fa) {
font-size: 40px;
}
@media (max-width: 576px) {
font-size: 40px;
line-height: 1.3em;
}
}
.s1-Desc {
font-size: 30px;
color: $themeReverse;
text-transform: capitalize;
width: 100%;
max-width: 450px;
margin-top: 40px;
line-height: 1.2em;
&:lang(fa) {
font-size: 20px !important;
margin-top: 0;
}
@media (max-width: 768px) {
max-width: 300px;
font-size: 25px !important;
}
@media (max-width: 576px) {
line-height: 1.2em;
}
}
.s1-Desc1 {
font-size: 25px;
color: $themeReverse;
text-transform: uppercase;
margin-top: 5px;
&:lang(fa) {
font-size: 15px !important;
}
b {
}
@media (max-width: 576px) {
font-size: 20px;
}
}
}
.s1-Down {
position: absolute;
bottom: 8px;
left: 10%;
display: inline-flex;
@media (max-width: 800px) {
bottom: 30px;
}
.s1-Down-Link {
@include transform(translateX(-2px));
@extend %defaultTransition;
cursor: pointer;
//text-decoration: underline;
//text-decoration-thickness: 3px;
//text-decoration-color: $themeReverse;
&:hover {
color: $red;
}
}
}
}
}
//@media (min-width: 576px) {
// height: 97vh;
//}
//@media (min-width: 768px) {
// height: 97vh;
//}
//@media (min-width: 992px) {
// height: 97vh;
//}
@media (max-height: 560px) {
height: 93vh;
}
@media (min-height: 757px) {
height: 94.5vh;
}
@media (min-height: 800px) {
height: 95.5vh;
}
}
/*-------------------------------- Section 2 -----------------------------------*/
.s2-Img-BG {
overflow: hidden;
.parallax {
background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
url('/img/HomePage/Refinery.jpg') no-repeat center;
background-size: cover;
width: 100%;
.s2 {
.row {
.s2-desc-col {
padding: 30px !important;
p {
color: $themeReverse;
margin-top: 40px;
font-size: 15px;
}
h2 {
color: $red;
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-position: under;
font-size: 30px;
margin-bottom: 20px;
margin-top: 110px;
@media (max-width: 1170px) {
margin-top: 0;
}
}
@media (max-width: 992px) {
padding: 25px !important;
}
.staggerItemSeeBTN {
display: inline-block;
background-color: $themeTransparent;
border: 1px solid #4d4d4d;
border-radius: 3px;
padding: 10px 20px;
font-size: 16px;
@include transition(background-color 0.3s, color 0.3s);
@extend %defaultTransition;
cursor: pointer;
text-align: center;
margin-top: 40px;
@media (max-width: 768px) {
width: 100%;
}
&:hover {
border: 1px solid $red;
color: $red;
@extend %defaultTransition;
}
}
}
.s2-img-col {
#slidesProjects {
.s2-item-activity {
display: flex !important;
align-items: stretch;
@media (min-width: 768px) {
padding-left: 0 !important;
padding-right: 0 !important;
}
a {
display: block;
width: 100%;
margin: 0 10px;
.s2-img {
width: 100%;
//height: 87%;
//object-fit: cover;
@include transition(0.3s);
&:hover {
@include transform(scale(1.01));
}
}
.title-img {
background-color: rgba($red, 0.7);
height: 100%;
padding: 20px;
text-align: center;
h4 {
color: $themeReverse;
font-size: 18px;
@media (max-width: 768px) {
font-size: 16px !important;
}
}
p {
font-size: 14px;
color: $themeReverse;
}
}
}
}
.slick-next {
font-size: 0;
line-height: 0;
position: absolute;
top: 50%;
display: block;
width: 80px;
height: 100%;
padding: 0;
transform: translate(-30%, -50%);
cursor: pointer;
color: transparent;
border: none;
outline: none;
background: transparent;
background: linear-gradient(to left, rgba(#000, 0.7), rgba(#000, 0) 90%);
z-index: 1;
@media (max-width: 992px) {
right: -12px;
}
&:lang(en) {
transform: translate(-61%, -50%);
}
}
.slick-prev {
font-size: 0;
line-height: 0;
position: absolute;
top: 50%;
display: block;
width: 80px;
height: 100%;
padding: 0;
transform: translate(50%, -50%);
cursor: pointer;
color: transparent;
border: none;
outline: none;
background: transparent;
background: linear-gradient(to right, rgba(#000, 0.7), rgba(#000, 0) 90%);
z-index: 1;
&:lang(en) {
transform: translate(31%, -50%);
}
}
}
}
}
#slidesProjects {
.s2-item-activity {
display: flex !important;
align-items: stretch;
@media (min-width: 768px) {
padding-left: 0 !important;
padding-right: 0 !important;
}
a {
display: block;
width: 100%;
@media (min-width: 540px) {
margin: 0 10px;
}
.s2-img {
width: 100%;
//height: 87%;
//object-fit: cover;
@include transition(0.3s);
&:hover {
@include transform(scale(1.01));
}
}
.title-img {
background-color: rgba($red, 0.7);
height: 100%;
padding: 20px;
text-align: center;
h4 {
color: $themeReverse;
font-size: 18px;
@media (max-width: 768px) {
font-size: 16px !important;
}
}
p {
font-size: 14px;
color: $themeReverse;
}
}
}
}
.slick-next {
right: 10px;
z-index: 100;
}
.slick-prev {
left: 10px;
z-index: 100;
}
//.slick-next {
// font-size: 0;
// line-height: 0;
// position: absolute;
// top: 50%;
// display: block;
// width: 80px;
// height: 100%;
// padding: 0;
// transform: translate(-30%, -50%);
// cursor: pointer;
// color: transparent;
// border: none;
// outline: none;
// background: transparent;
// background: linear-gradient(to left, rgba(#000, 0.7), rgba(#000, 0) 90%);
// z-index: 1;
//
// @media (max-width: 992px) {
// right: -12px;
// }
//
// &:lang(en) {
// transform: translate(-61%, -50%);
// }
//
//}
//
//.slick-prev {
// font-size: 0;
// line-height: 0;
// position: absolute;
// top: 50%;
// display: block;
// width: 80px;
// height: 100%;
// padding: 0;
// transform: translate(50%, -50%);
// cursor: pointer;
// color: transparent;
// border: none;
// outline: none;
// background: transparent;
// background: linear-gradient(to right, rgba(#000, 0.7), rgba(#000, 0) 90%);
// z-index: 1;
// left: -42px;
//
// &:lang(en) {
// transform: translate(31%, -50%);
// }
//}
}
}
}
}
/* -------------------------------- Section 3 -----------------------------------*/
.s3-Img-BG {
overflow: hidden;
.parallax {
height: 50vh;
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
url('/img/HomePage/Stainless.jpg') no-repeat center;
background-size: cover;
justify-content: center;
align-items: center;
display: flex;
//position: relative;
opacity: 1;
width: 100%;
position: static;
@media (max-width: 768px) {
& {
height: auto;
padding-bottom: 100px;
}
}
.container {
//max-width: 1195px !important;
.s3-Title {
font-size: 70px !important;
font-weight: bold;
color: rgba(#fff, 0.7);
text-transform: uppercase;
margin-top: 30px;
&:lang(fa) {
font-size: 30px !important;
}
@media (max-width: 576px) {
font-size: 40px !important;
}
}
.row {
div {
margin-top: 5%;
.num {
font-size: 70px !important;
color: $themeReverse;
}
a {
display: block;
height: 100%;
.s3-title-num {
color: $themeReverse;
font-size: 15px;
width: 100%;
max-width: 370px;
text-align: center;
border: 1px solid $themeReverse;
padding: 10px;
@include borderRadius(5px);
@extend %defaultTransition;
height: 100%;
&:hover {
color: $themeReverse !important;
background-color: $red;
border-color: $red;
}
&:lang(fa) {
font-size: 20px !important;
}
@media (max-width: 576px) {
font-size: 12px;
}
//&:first-child {
// color: $themeReverse;
// font-size: 25px;
// @media (max-width: 576px) {
// font-size: 40px;
// }
//}
}
}
}
}
}
}
}
/*-------------------------------- Section 4 -----------------------------------*/
.s4-Img-BG {
overflow: hidden;
.parallax {
height: auto;
background: linear-gradient(rgba(112, 112, 112, 0.6), rgba(112, 112, 112, 0.6)),
url('/img/HomePage/Stainless.jpg') no-repeat center;
background-size: cover;
opacity: 1;
.s4-body {
margin-bottom: 10px;
.s4-title {
color: #000000;
text-align: center;
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-position: under;
text-decoration-color: $red;
margin-bottom: 50px;
font-size: 30px;
// margin-top: 30px;
}
.s4-project-post {
//padding: 0 25px !important;
//margin-top: 30px;
height: 100%;
position: relative;
padding-bottom: 40px;
padding-top: 5px;
background-color: #c8c8c8;
//margin: 0 10px;
@include boxShadow(0 4px 16px rgba(#000, 0.3));
border-radius: 5px;
h4 {
color: $red;
margin: 20px;
font-size: 20px;
}
.s4-img {
width: 100%;
}
h3 {
font-size: 20px;
margin: 10px;
}
p {
display: block !important;
margin: 0 10px 40px 10px;
font-size: 16px;
color: $theme;
}
a {
display: block !important;
color: #ed1d24;
font-size: 20px;
margin: 20px;
position: absolute;
bottom: 2px;
right: 0;
i {
font-size: 15px;
}
}
}
}
}
}
/*-------------------------------- Section 5 -----------------------------------*/
.s5-Img-BG {
overflow: hidden;
.parallax {
// background-image: url("/img/Petro.jpg");
height: 100%;
background: $dimmer, url('/img/HomePage/testimonial.jpg') no-repeat center;
background-size: cover;
flex-direction: column;
// padding-top: 30px;
// padding-bottom: 30px;
display: flex;
justify-content: center;
align-items: center;
#slides {
.slick-dots {
display: flex;
justify-content: center;
margin: 0;
//padding: 1rem 0;
list-style-type: none;
li {
margin: 0;
}
button {
display: flex;
width: 10px;
height: 10px;
padding: 0;
border: 1px solid $themeReverse;
border-radius: 100%;
background-color: transparent;
text-indent: -9999px;
}
li.slick-active button {
background-color: $themeReverse;
}
}
.slide {
width: 100%;
display: flex !important;
justify-content: center;
align-items: center;
flex-direction: column;
.content {
text-align: center;
background-color: transparent;
width: auto;
height: auto;
h2 {
color: $red;
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-position: under;
text-decoration-color: $themeReverse;
margin-bottom: 50px;
// text-align: center;
// margin-bottom: 80px;
font-size: 40px;
}
p {
width: 100%;
max-width: 600px;
color: $themeReverse;
text-align: center;
@media (max-width: 768px) {
& {
max-width: 100%;
}
}
}
}
.info {
display: flex !important;
justify-content: center;
flex-direction: row;
align-items: center;
width: 100%;
margin-bottom: 20px;
.imgBox {
padding: 10px;
img {
@include borderRadius(50%);
}
}
.txtBox {
padding: 10px;
display: block;
p {
display: block;
}
}
}
div {
// display: flex;
// align-items: center;
// justify-content: center;
.s4-user-img {
width: 50px;
}
div {
p {
color: $themeReverse;
// text-align: center;
font-size: 12px;
&:first-child {
color: $themeReverse;
// text-align: center;
font-size: 16px;
}
}
}
}
}
}
}
}
/*-------------------------------- Section 6 -----------------------------------*/
.s6-Img-BG {
overflow: hidden;
.parallax {
height: auto;
background: linear-gradient(rgba(112, 112, 112, 0.6), rgba(112, 112, 112, 0.6)),
url('/img/HomePage/Stainless.jpg') no-repeat center;
background-size: cover;
overflow: hidden;
.s6-title {
margin-bottom: 30px;
flex-direction: column;
display: flex;
align-items: center;
.s6-Desc {
display: inline-flex;
// align-items: center;
i {
color: $red;
font-size: 10px;
margin: 5px;
}
}
h2 {
color: #000000;
text-align: center;
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-position: under;
text-decoration-color: $red;
margin-bottom: 20px;
}
}
.s6-imag-view {
display: flex;
justify-content: center;
align-items: center;
.s6-img {
width: 100%;
margin-top: 10px;
text-align: center;
@extend %defaultTransition;
@media (max-width: 575px) {
width: 100%;
max-width: 350px;
}
&:hover {
opacity: 0.8;
}
}
p {
margin-top: 20px;
margin-bottom: 30px;
text-align: justify;
width: 70%;
font-size: 16px;
}
a {
color: $red;
}
}
}
}
/*-------------------------------- Section 9 -----------------------------------*/
.s9-Img-BG {
overflow: hidden;
.parallax {
height: auto;
background-color: #f1f1f1;
overflow: hidden;
.s9 {
.s9-title {
margin-bottom: 30px;
flex-direction: column;
display: flex;
align-items: center;
.s9-Desc {
display: inline-flex;
// align-items: center;
i {
color: $red;
font-size: 10px;
margin: 5px;
}
}
h2 {
color: #000000;
text-align: center;
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-position: under;
text-decoration-color: $red;
margin-bottom: 20px;
}
}
.consents {
.slick-track {
padding: 35px 0;
align-items: center;
justify-content: center;
display: flex;
}
.slick-arrow {
&:before {
color: $themeSecond;
}
&:after {
color: $themeSecond;
}
}
.s9-imag-view {
a {
display: flex !important;
justify-content: center;
align-items: center;
}
.s9-img {
width: 80%;
//margin-top: 10px;
text-align: center;
@extend %defaultTransition;
@include boxShadow(0 5px 20px rgba(#000, 0.7));
@media (max-width: 575px) {
width: 100%;
max-width: 350px;
}
&:hover {
opacity: 0.8;
}
}
p {
margin-top: 20px;
margin-bottom: 30px;
text-align: justify;
width: 70%;
font-size: 16px;
}
a {
color: $red;
}
}
}
.view-btn {
display: flex !important;
align-items: center;
justify-content: center;
margin-top: 20px;
}
}
}
}
/*-------------------------------- Section 10 -----------------------------------*/
.s10-Img-BG {
overflow: hidden;
.parallax {
height: auto;
background-color: #f1f1f1;
overflow: hidden;
// .row {
// --bs-gutter-x: 0;
// }
.s10-title {
margin-bottom: 30px;
flex-direction: column;
display: flex;
align-items: center;
.s9-Desc {
display: inline-flex;
// align-items: center;
i {
color: $red;
font-size: 10px;
margin: 5px;
}
}
h2 {
color: #000000;
text-align: center;
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-position: under;
text-decoration-color: $red;
margin-bottom: 20px;
}
}
}
}
/*-------------------------------- Section 7 -----------------------------------*/
.s7-Img-BG {
overflow: hidden;
.parallax {
height: 300px;
background: linear-gradient(rgba(112, 112, 112, 0.2), rgba(112, 112, 112, 0.2)),
url('/img/HomePage/CTA.jpg') no-repeat center;
background-size: cover;
padding-top: 30px;
padding-bottom: 30px;
.s7-body {
h2 {
text-align: center;
color: $red;
margin-bottom: 50px;
margin-top: 50px;
@media (max-width: 768px) {
margin-top: 10px;
font-size: 20px;
line-height: 1.3em;
}
}
div {
div {
h3 {
color: $themeReverse;
margin-bottom: 10px;
}
p {
color: $themeReverse;
font-size: 12px;
}
}
}
}
}
}
/*-------------------------------- Section 8 -----------------------------------*/
.s8-Img-BG {
.parallax {
height: auto;
background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
url('/img/HomePage/contacts.jpg') no-repeat center;
background-size: cover;
align-items: center;
@media (max-width: 768px) {
& {
height: 100%;
}
}
.s8-body {
.gallery {
@include transform(translateY(-90%));
@media (min-width: 360px) {
@include transform(translateY(-90%));
}
@media (min-width: 552px) {
@include transform(translateY(-87%));
}
@media (min-width: 768px) {
@include transform(translateY(-71%));
}
@media (min-width: 992px) {
@include transform(translateY(-66%));
}
@media (min-width: 1200px) {
@include transform(translateY(-70%));
}
@media (min-width: 1400px) {
@include transform(translateY(-67%));
}
.slick-prev {
@media (max-width: 576px) {
left: 12px;
z-index: 10;
top: 55%;
}
}
.slick-next {
@media (max-width: 576px) {
right: 12px;
z-index: 10;
top: 55%;
}
}
.gallery-item {
padding: 0 !important;
position: relative;
overflow: hidden;
@media (max-width: 768px) {
}
img {
width: 100%;
//@include transform(translateY(50%));
@media (max-width: 768px) {
height: 250px;
@include transform(translateY(0));
}
}
.txtBox {
width: 100%;
height: 100%;
background: rgba(#000000, 0.6);
position: absolute;
top: 0;
left: 0;
display: flex;
justify-content: space-between;
flex-direction: column;
//@media (max-width: 768px) {
// padding: 50px 10px;
//}
._txtBox {
background: rgba(#000000, 0.6);
padding: 20px;
height: 50%;
@media (max-width: 768px) {
background: transparent;
height: auto;
}
}
h3 {
margin-bottom: 10px;
color: $themeReverse;
}
p {
color: $themeReverse;
@media (max-width: 768px) {
& {
font-size: 10px;
}
}
}
span {
font-size: 12px;
@media (max-width: 768px) {
& {
font-size: 10px;
}
}
}
.s8-tel {
display: flex;
margin-top: auto;
flex-direction: column;
padding: 20px;
//justify-content: space-between;
//@media (max-width: 768px) {
// & {
// margin-top: 10px;
// }
//}
.s8-link {
margin-top: 10px;
font-size: 15px;
@extend %defaultTransition;
&:hover {
color: $red;
@extend %defaultTransition;
}
}
}
}
}
}
.s8-Title {
font-size: 30px;
color: $themeReverse;
text-transform: uppercase;
margin-top: -130px;
@media (max-width: 992px) {
font-size: 50px;
margin-top: -60px;
}
@media (max-width: 768px) {
font-size: 50px;
margin-top: -200px;
}
}
.row {
display: flex;
//justify-content: space-between;
div {
&.info {
justify-content: center;
flex-direction: column;
display: flex;
div {
display: inline-block;
margin: 10px 0;
b {
color: $themeReverse;
}
.s8-link-address {
display: inline-block;
color: $themeReverse;
margin: 5px 5px;
direction: ltr !important;
@extend %defaultTransition;
&:hover {
color: $red;
@extend %defaultTransition;
}
.h4 {
color: $themeReverse;
margin: 0 10px 0 0;
}
}
}
}
span {
color: $themeReverse;
font-size: 20px;
}
&.input-body {
flex-direction: column;
display: flex;
// width: 100%;
@media (max-width: 768px) {
& {
margin: 20px 0;
}
}
.btnSub {
display: flex;
justify-content: flex-end;
margin: 10px 0;
}
.input {
background-color: rgba(216, 216, 216, 0.5);
color: $themeReverse;
border: 0;
margin-top: 10px;
padding: 15px;
width: 100%;
@include boxSizing(border-box);
&::placeholder {
color: rgba(#000, 0.7);
}
}
span {
font-size: 18px;
}
textarea {
resize: vertical;
}
.err {
p {
margin-top: 3px;
color: $red;
}
input,
textarea {
border: 1px solid $red;
}
}
}
}
}
}
}
}
}
//------------------------------- About Page --------------------------------
.about-page {
background-color: #000000;
/*-------------------------------- Section 1 -----------------------------------*/
.s1-Img-BG {
overflow: hidden;
.parallax {
height: $sizeHeader;
align-items: center;
justify-content: center;
display: flex;
//background: $dimmer, url("/img/AboutPage/page-title.png") no-repeat center;
background-position: center;
background-size: cover;
h1 {
color: rgba($themeReverse, 0.7);
text-transform: uppercase;
}
}
}
/*-------------------------------- Section 2 -----------------------------------*/
.s2-BG {
overflow: hidden;
.parallax {
.row {
.img {
img {
height: 100%;
width: 100%;
}
@media (min-width: 768px) {
padding-left: 0 !important;
padding-right: 0 !important;
}
}
.descImg {
background-color: #f2f2f2;
padding: 0 50px !important;
@media (max-width: 768px) {
padding-left: 0 !important;
padding-right: 0 !important;
}
.descContainer {
padding-right: 50px;
padding-left: 50px;
@media (max-width: 768px) {
padding: 20px 0;
}
}
@media (min-width: 768px) {
padding-left: 0 !important;
padding-right: 0 !important;
}
.h2,
h6 {
//margin-top: 20px;
margin-bottom: 20px;
}
h6 {
margin-top: 20px;
color: #333333;
}
.description {
@extend %maxHeightText;
}
div {
.row {
.features {
display: flex;
//align-items: center;
margin: 0 0 30px 0;
flex-direction: row;
@media (max-width: 768px) {
& {
text-align: center;
}
}
@media (min-width: 769px) {
&:last-child {
margin-top: -20px;
}
}
i {
@include transform(translateY(6px));
color: #333;
}
p {
margin: 0 10px;
font-size: 15px;
}
}
}
}
}
}
}
}
/*-------------------------------- Section 3 -----------------------------------*/
.s3-BG {
overflow: hidden;
background-color: #f2f2f2;
.parallax {
.row {
.s3-col1 {
padding: 50px !important;
background-color: #f2f2f2;
@media (max-width: 768px) {
padding: 30px 0 !important;
}
.h2 {
//margin-top: 40px;
margin-bottom: 20px;
}
.description {
@extend %maxHeightText;
//width: 100%;
//max-width: 70%;
//@media (max-width: 768px) {
// & {
// //margin: 10px;
// max-width: 100%;
// }
//}
}
a {
color: $red;
border: 1px solid $red;
border-radius: 4px;
padding: 10px 20px;
margin: 40px 0 0 0;
display: inline-block;
@extend %defaultTransition;
&:hover {
color: $themeReverse;
border: 1px solid $themeReverse;
background-color: $red;
@extend %defaultTransition;
}
}
}
.s3-col2 {
background-color: #000;
padding-right: 50px;
padding-left: 50px;
display: flex;
justify-content: space-between;
align-items: center;
@media (max-width: 768px) {
padding: 30px 0 !important;
}
.features-body {
flex-direction: column;
display: flex;
justify-content: space-between;
.features {
display: flex;
margin: 30px 0;
//&:first-child{
// margin-top: 0;
//}
flex-direction: row;
align-items: center;
img {
margin-right: 15px;
//margin: 0 10px;
&:lang(fa) {
margin-left: 15px;
margin-right: 0;
}
}
h6 {
color: $themeReverse;
font-size: 16px !important;
}
span {
color: #cccccc;
@extend %maxHeightText;
font-size: $span;
width: 100%;
margin-top: 5px;
@media (max-width: 768px) {
& {
max-width: 100%;
}
}
}
}
}
}
}
}
}
/*-------------------------------- Section 4 -----------------------------------*/
.s4-BG {
overflow: hidden;
.parallax {
background-color: #fff;
.s4-col1 {
//padding: 80px !important;
display: flex;
justify-content: center;
flex-direction: column;
.h2 {
}
span {
@extend %maxHeightText;
margin: 20px 0;
width: 100%;
max-width: 70%;
font-size: 16px;
@media (max-width: 768px) {
& {
max-width: 100%;
}
}
}
}
.s4-col2 {
@media (max-width: 768px) {
padding-top: 10px !important;
padding-bottom: 10px !important;
}
.progress {
margin-bottom: 20px;
span {
font-size: $span;
}
.progress-Parent {
position: relative;
background-color: #d8d8d8;
height: 4px;
width: 100%;
border-radius: 2px;
margin: 10px 0;
.progress-Child {
position: absolute;
background-color: $red;
height: 4px;
width: 80%;
border-radius: 2px;
}
}
}
}
.s4-col3 {
justify-content: center;
display: flex;
align-items: center;
}
}
}
/*-------------------------------- Section 5 -----------------------------------*/
.s5-Img-BG {
overflow: hidden;
.parallax {
height: auto;
background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
url('/img/AboutPage/shutterstock.png') no-repeat center;
background-size: cover;
display: flex;
align-items: center;
justify-content: center;
.container {
.title {
margin-bottom: 80px;
display: flex;
align-items: center;
justify-content: center;
.h2 {
color: $red;
// text-align: center;
margin: 0 5px;
&:first-child {
color: $themeReverse;
// text-align: center;
}
}
}
.row {
div {
text-align: center;
.h1 {
color: $themeReverse;
margin: 0;
}
span {
color: $red;
font-size: 20px !important;
}
}
}
}
}
}
/*-------------------------------- Section 6 -----------------------------------*/
.s6-BG {
overflow: hidden;
.parallax {
background-color: #f4f4f4;
.h2 {
text-align: center;
margin-bottom: 50px;
}
.s6-team {
padding: 0 100px;
justify-content: center;
@media (max-width: 992px) {
padding: 0 !important;
}
.team-View {
background-color: #fff;
@include boxShadow(0 4px 16px rgba(#000, 0.1));
img {
width: 100%;
height: auto;
}
.title-Img {
padding: 20px;
text-align: center;
p {
}
span {
color: #9e9e9e;
}
}
}
}
.s6-notFound {
display: flex;
justify-content: center;
align-items: center;
}
}
}
/*-------------------------------- Section 7 -----------------------------------*/
.s7-BG {
overflow: hidden;
.parallax {
.row {
& > div {
@media (min-width: 575px) {
padding: 0;
}
}
.s7-view-title {
background-color: #f4f4f4;
padding: 50px 0;
.s7-title {
text-align: center;
}
}
.s7-Img {
height: 100%;
img {
width: 100%;
height: 100%;
}
}
.s7-Body {
display: flex;
flex-direction: column;
justify-content: center;
padding: 0 20px !important;
background-color: #151515;
@media (max-width: 768px) {
padding: 0 !important;
}
img {
margin-top: 20px;
display: block;
width: 250px;
@media (max-width: 768px) {
width: 100%;
}
}
.s7-Title {
position: relative;
margin-top: 30px;
.h6 {
color: #fff;
&::before {
content: '';
position: absolute;
left: 0;
bottom: -20px;
height: 1px;
width: 10%; /* or 100px */
border-bottom: 2px solid #d8d8d8;
}
&:lang(fa) {
&::before {
right: 0 !important;
left: auto;
}
}
}
}
.s7-desc {
margin: 50px 0 10px 0;
width: 100%;
//max-width: 80%;
@media (max-width: 768px) {
& {
max-width: 100%;
}
}
span {
color: #9c9c9c;
}
}
.staggerItemSeeBTN {
display: inline-block;
background-color: $themeTransparent;
border: 1px solid #4d4d4d;
border-radius: 3px;
padding: 10px 20px;
font-size: 16px;
@include transition(background-color 0.3s, color 0.3s);
@extend %defaultTransition;
cursor: pointer;
text-align: center;
margin: 40px 0;
span {
color: #fff;
@extend %defaultTransition;
}
@media (max-width: 768px) {
width: 100%;
}
&:hover {
border: 1px solid $red;
color: $themeReverse;
background-color: $red;
span {
color: $themeReverse;
}
}
}
}
}
}
}
/*-------------------------------- Section 8 -----------------------------------*/
.s8-BG {
overflow: hidden;
.parallax {
.row {
& > div {
@media (min-width: 575px) {
padding: 0;
}
}
.s8-Img {
height: 100%;
img {
width: 100%;
height: 100%;
}
}
.s8-Body {
display: flex;
flex-direction: column;
justify-content: center;
padding: 0 20px !important;
background-color: #151515;
@media (max-width: 768px) {
padding: 0 !important;
}
img {
margin-top: 20px;
display: block;
width: 250px;
@media (max-width: 768px) {
width: 100%;
}
}
.s8-Title {
position: relative;
margin-top: 30px;
.h6 {
color: #fff;
&::before {
content: '';
position: absolute;
left: 0;
bottom: -20px;
height: 1px;
width: 10%; /* or 100px */
border-bottom: 2px solid #d8d8d8;
}
&:lang(fa) {
&::before {
right: 0 !important;
left: auto;
}
}
}
}
.s8-desc {
margin: 50px 0 10px 0;
width: 100%;
//max-width: 80%;
@media (max-width: 768px) {
& {
max-width: 100%;
}
}
span {
color: #9c9c9c;
}
}
.staggerItemSeeBTN {
display: inline-block;
background-color: $themeTransparent;
border: 1px solid #4d4d4d;
border-radius: 3px;
padding: 10px 20px;
font-size: 16px;
@include transition(background-color 0.3s, color 0.3s);
@extend %defaultTransition;
cursor: pointer;
text-align: center;
margin: 40px 0;
span {
color: #fff;
@extend %defaultTransition;
}
@media (max-width: 768px) {
width: 100%;
}
&:hover {
border: 1px solid $red;
color: $themeReverse;
background-color: $red;
span {
color: $themeReverse;
}
}
}
}
}
}
}
/*-------------------------------- Section 9 -----------------------------------*/
.s9-BG {
overflow: hidden;
.parallax {
.row {
& > div {
@media (min-width: 575px) {
padding: 0;
}
}
.s9-Img {
height: 100%;
img {
width: 100%;
height: 100%;
}
}
.s9-Body {
display: flex;
flex-direction: column;
justify-content: center;
padding: 0 20px !important;
background-color: #151515;
@media (max-width: 768px) {
padding: 0 !important;
}
img {
margin-top: 20px;
display: block;
width: 250px;
@media (max-width: 768px) {
width: 100%;
}
}
.s9-Title {
position: relative;
margin-top: 30px;
.h6 {
color: #fff;
&::before {
content: '';
position: absolute;
left: 0;
bottom: -20px;
height: 1px;
width: 10%; /* or 100px */
border-bottom: 2px solid #d8d8d8;
}
&:lang(fa) {
&::before {
right: 0 !important;
left: auto;
}
}
}
}
.s9-desc {
margin: 50px 0 10px 0;
width: 100%;
//max-width: 80%;
@media (max-width: 768px) {
& {
max-width: 100%;
}
}
span {
color: #9c9c9c;
}
}
.staggerItemSeeBTN {
display: inline-block;
background-color: $themeTransparent;
border: 1px solid #4d4d4d;
border-radius: 3px;
padding: 10px 20px;
font-size: 16px;
@include transition(background-color 0.3s, color 0.3s);
@extend %defaultTransition;
cursor: pointer;
text-align: center;
margin: 40px 0;
span {
color: #fff;
@extend %defaultTransition;
}
@media (max-width: 768px) {
width: 100%;
}
&:hover {
border: 1px solid $red;
color: $themeReverse;
background-color: $red;
span {
color: $themeReverse;
}
}
}
}
}
}
}
/*-------------------------------- Section 10 -----------------------------------*/
.s10-BG {
overflow: hidden;
.parallax {
.row {
& > div {
@media (min-width: 575px) {
padding: 0;
}
}
.s10-Img {
height: 100%;
img {
width: 100%;
height: 100%;
}
}
.s10-Body {
display: flex;
flex-direction: column;
justify-content: center;
padding: 0 20px !important;
background-color: #151515;
@media (max-width: 768px) {
padding: 0 !important;
}
img {
margin-top: 20px;
display: block;
width: 250px;
@media (max-width: 768px) {
width: 100%;
}
}
.s10-Title {
position: relative;
margin-top: 30px;
.h6 {
color: #fff;
&::before {
content: '';
position: absolute;
left: 0;
bottom: -20px;
height: 1px;
width: 10%; /* or 100px */
border-bottom: 2px solid #d8d8d8;
}
&:lang(fa) {
&::before {
right: 0 !important;
left: auto;
}
}
}
}
.s10-desc {
margin: 50px 0 10px 0;
width: 100%;
//max-width: 80%;
@media (max-width: 768px) {
& {
max-width: 100%;
}
}
span {
color: #9c9c9c;
}
}
.staggerItemSeeBTN {
display: inline-block;
background-color: $themeTransparent;
border: 1px solid #4d4d4d;
border-radius: 3px;
padding: 10px 20px;
font-size: 16px;
@include transition(background-color 0.3s, color 0.3s);
@extend %defaultTransition;
cursor: pointer;
text-align: center;
margin: 40px 0;
span {
color: #fff;
@extend %defaultTransition;
}
@media (max-width: 768px) {
width: 100%;
}
&:hover {
border: 1px solid $red;
color: $themeReverse;
background-color: $red;
span {
color: $themeReverse;
}
}
}
}
}
}
}
/*-------------------------------- Section 11 -----------------------------------*/
.s11-BG {
.parallax {
background-color: #fff;
.s11-h1-title {
text-align: center;
margin-bottom: 50px;
}
.s11-chart {
img {
width: 100%;
}
}
}
}
/*-------------------------------- Section 12 -----------------------------------*/
.s12-BG {
overflow: hidden;
.parallax {
background-color: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
h2 {
margin: 15px 0;
}
div {
display: flex;
align-items: center;
justify-content: center;
//padding: 20px;
div {
border: 1px solid #eee;
height: 150px;
padding: 20px;
img {
width: 70%;
//height: 100px;
object-fit: contain;
}
}
}
}
}
}
//------------------------------- Blog Page --------------------------------
.blog-page {
background-color: #000000;
/*-------------------------------- Section 1 -----------------------------------*/
.s1-Img-BG {
overflow: hidden;
.parallax {
height: $sizeHeader;
align-items: center;
justify-content: center;
display: flex;
//background: $dimmer, url("/img/BlogPage/page-title.png") no-repeat center;
background-position: center;
background-size: cover;
h1 {
color: rgba($themeReverse, 0.7);
text-transform: uppercase;
}
}
}
/*-------------------------------- Section 2 -----------------------------------*/
.s2-BG {
overflow: hidden;
background-color: #efefef;
padding: 15px;
display: flex;
align-items: center;
justify-content: center;
ul {
.s2-all-cat {
display: inline-block;
margin: 0 10px;
a {
color: #666666;
@extend %defaultTransition;
&:hover {
color: $red;
}
&.active {
color: $red;
}
}
}
}
}
/*-------------------------------- Section 3 -----------------------------------*/
.s3-BG {
background-color: #fbfbfb;
.parallax {
@media (max-width: 768px) {
padding: 20px 0;
}
.s3-item {
width: 100%;
height: 100%;
background-color: #fff;
margin: 0 auto;
position: relative;
@include boxShadow(rgba(149, 157, 165, 0.2) 0px 8px 24px);
img {
width: 100%;
height: auto;
}
.s3-body {
padding: 15px;
padding-bottom: 50px;
.s3-top-desc {
display: flex;
justify-content: space-around;
align-items: center;
//margin: 20px 10px;
//padding: 0 30px;
i {
color: $red;
}
span {
color: #a8a8a8;
margin: 0 5px;
}
}
.h6 {
margin: 20px 0;
color: $theme;
}
p {
color: #a8a8a8;
}
.s3-reading {
display: inline-block;
margin: 20px 0 auto 0;
align-items: center;
position: absolute;
bottom: 15px;
right: 15px;
i {
@include transform(translateY(2px));
}
p {
color: #757575;
@extend %defaultTransition;
&:hover {
color: #ed1d24;
@extend %defaultTransition;
}
i {
margin: 0 5px;
}
}
}
}
}
.s3-notFound {
display: flex;
justify-content: center;
align-items: center;
}
}
}
}
//------------------------------- Blog Details Page --------------------------------
.blog-details-page {
background-color: #fbfbfb;
/*-------------------------------- Section 1 -----------------------------------*/
.s1-Img-BG {
overflow: hidden;
.parallax {
height: $sizeHeader;
align-items: center;
justify-content: flex-end;
display: flex;
background: $dimmer, url('/img/BlogPage/DetailsPage/bg.png') no-repeat center;
background-size: cover;
flex-direction: column;
.s1-title {
flex-direction: row;
display: flex;
// align-items: center;
position: relative;
margin-bottom: 40px;
.date {
&::before {
content: '';
position: absolute;
left: 50px;
top: 0;
bottom: 0;
border: 1px solid #fff;
}
&:lang(fa) {
&::before {
left: auto;
right: 60px;
top: 0;
bottom: 0;
border: 1px solid #fff;
content: '';
position: absolute;
}
}
p {
color: #fff;
margin: 0 15px;
}
}
.s1-desc {
margin: 0 15px;
.h6 {
color: $themeReverse;
text-transform: uppercase;
}
div {
margin-top: 5px;
}
svg {
margin-left: 10px;
}
span {
color: #fff;
margin: 0 5px;
}
}
}
}
}
/*-------------------------------- Section 2 -----------------------------------*/
.s2-BG {
background-color: #efefef;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
.s2-desc {
padding: 10px;
direction: ltr;
&:lang(fa) {
direction: rtl;
}
i {
color: #a8a8a8;
margin: 0 5px;
display: inline-block;
@include transform(translateY(3px));
}
p {
color: #a8a8a8;
display: inline-block;
}
}
}
/*-------------------------------- Section Content -----------------------------------*/
.content {
@media (max-width: 768px) {
padding: 20px 0;
}
.ck-content {
font-family: 'geometria', sans-serif;
&:lang(fa) {
font-family: 'dubaiM', sans-serif;
}
}
}
/*-------------------------------- Section 3 -----------------------------------*/
.s3-BG {
overflow: hidden;
background-color: #fbfbfb;
.parallax {
.container {
//width: 100%;
//max-width: 60%;
//@media (max-width: 768px) {
// & {
// max-width: 100%;
// }
//}
.s3-title {
margin-bottom: 20px;
.h5 {
color: $theme;
}
}
.s3-desc {
span {
color: #797979;
}
}
}
}
}
/*-------------------------------- Section 4 -----------------------------------*/
.s4-Img-BG {
overflow: hidden;
background-color: #fbfbfb;
.parallax {
img {
width: 80%;
height: auto;
}
}
}
/*-------------------------------- Section 5 -----------------------------------*/
.s5-BG {
overflow: hidden;
background-color: #fbfbfb;
.parallax {
.container {
//width: 100%;
//max-width: 60%;
//@media (max-width: 768px) {
// & {
// max-width: 100%;
// }
//}
.s5-title {
margin-bottom: 20px;
.h5 {
color: $theme;
}
}
.s5-desc {
span {
color: #797979;
}
}
}
}
}
/*-------------------------------- Section 6 -----------------------------------*/
.s6-Img-BG {
overflow: hidden;
background-color: #fbfbfb;
.parallax {
justify-content: flex-end;
display: flex;
img {
width: 80%;
height: auto;
}
}
}
/*-------------------------------- Section 7 -----------------------------------*/
.s7-BG {
overflow: hidden;
background-color: #fbfbfb;
.parallax {
background-color: $themeReverse;
.container {
//width: 100%;
//max-width: 60%;
//@media (max-width: 768px) {
// & {
// max-width: 100%;
// }
//}
.s7-title {
margin-bottom: 20px;
.h5 {
color: $theme;
}
}
.s7-desc {
span {
color: #797979;
}
}
}
}
}
/*-------------------------------- Section 8 -----------------------------------*/
.s8-Img-BG {
overflow: hidden;
.parallax {
height: 400px;
align-items: center;
justify-content: center;
display: flex;
background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)),
url('/img/BlogPage/DetailsPage/featured.png') no-repeat center;
background-size: cover;
flex-direction: column;
.h2 {
color: $themeReverse;
margin: 0 15px;
text-align: center;
}
.s8-desc {
width: 100%;
max-width: 50%;
margin: 20px 0;
@media (max-width: 768px) {
& {
max-width: 100%;
}
}
p {
color: $themeReverse;
text-align: center;
font-size: 16px;
}
}
}
}
/*-------------------------------- Section 9 -----------------------------------*/
.s9-BG {
overflow: hidden;
background-color: #fbfbfb;
.parallax {
.container {
//width: 100%;
//max-width: 60%;
//@media (max-width: 768px) {
// & {
// max-width: 100%;
// }
//}
.s9-title {
margin-bottom: 20px;
.h5 {
color: $theme;
}
}
.s9-desc {
span {
color: #797979;
}
}
}
}
}
/*-------------------------------- Section 10 -----------------------------------*/
.s10-BG {
padding: 30px 280px;
background-color: #fbfbfb;
@media (max-width: 768px) {
& {
padding: 30px 45px;
}
}
div {
display: ruby;
position: relative;
.s10-shares {
//opacity: 1 !important;
&::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
right: -20px;
border: 1px solid #d8d8d8;
}
p {
color: #a8a8a8;
}
}
.s10-social {
margin: 0 30px;
//opacity: 1 !important;
ul {
display: flex;
li {
i {
color: #333333;
margin: 0 7px;
cursor: pointer;
@include transition(0.3s);
}
.fa-facebook-f:hover {
color: #4064ac;
}
.fa-linkedin-in:hover {
color: #2764ac;
}
.fa-google-plus-g:hover {
color: #d64135;
}
.fa-envelope:hover {
color: #5fb7e0;
}
.fa-twitter:hover {
color: #5ba4d6;
}
.fa-pinterest-p:hover {
color: #e0191c;
}
}
}
}
}
}
}
//------------------------------- Activities Page --------------------------------
.activities-page {
background-color: #000000;
/*-------------------------------- Section 1 -----------------------------------*/
.s1-Img-BG {
overflow: hidden;
.parallax {
height: 45vh;
width: 100%;
//background: $dimmer, url("/img/ActivitiesPage/page-title.png") no-repeat center;
background-position: center;
background-size: cover;
h1 {
color: rgba($themeReverse, 0.7);
text-transform: uppercase;
}
span {
color: $themeReverse;
text-transform: capitalize;
text-align: center;
width: 100%;
max-width: 50%;
margin: 10px 0;
@media (max-width: 992px) {
max-width: 100%;
font-size: 12px;
margin-top: 0;
}
@media (max-width: 768px) {
max-width: 95%;
}
}
}
}
/*-------------------------------- Section 2 -----------------------------------*/
.s2-BG {
background-color: #ffffff;
overflow: hidden;
@media (max-width: 768px) {
padding-bottom: 10px;
padding-top: 10px;
}
.parallax {
@media (max-width: 768px) {
padding: 0 !important;
}
.container {
.s2-align-col {
align-items: stretch;
display: flex;
.s2-item {
width: auto;
margin-bottom: 25px;
background-color: #888585;
direction: ltr;
text-align: left;
overflow: hidden;
@media (max-width: 768px) {
& {
margin: 10px 0 !important;
}
}
a {
@include transition(0.3s);
display: inline-block;
img {
width: 100%;
height: auto;
}
&:hover {
@include transform(scale(1.01));
}
}
.s2-body {
padding: 13px 25px;
//direction: ltr;
//position: absolute;
h4 {
color: $themeReverse;
font-size: 18px !important;
text-align: right;
padding-top: 10px;
padding-bottom: 0;
//width: 100%;
//max-width: 200px;
@media (max-width: 768px) {
font-size: 15px !important;
}
&:lang(en) {
text-align: left;
}
}
}
}
}
}
}
}
}
//------------------------------- Activities Details Page --------------------------------
.activities-details-page {
background-color: #000000;
/*-------------------------------- Section 1 -----------------------------------*/
.s1-Img-BG {
overflow: hidden;
.parallax {
height: $sizeHeader;
align-items: center;
justify-content: center;
display: flex;
//background: $dimmer, url("/img/ActivitiesPage/page-title.png") no-repeat center;
background-position: center;
background-size: cover;
flex-direction: column;
h1 {
color: rgba($themeReverse, 0.7);
text-transform: uppercase;
font-size: 30px !important;
@media (max-width: 768px) {
& {
text-align: center;
}
}
}
}
}
/*-------------------------------- Section 2 -----------------------------------*/
.s2-Img-BG {
overflow: hidden;
.parallax {
.row {
.s2-item {
@media (min-width: 768px) {
padding-left: 0 !important;
padding-right: 0 !important;
}
img {
height: 100%;
width: 100%;
}
.s2-body {
background-color: #202020;
height: 100%;
width: 100%;
padding: 20px;
display: flex;
align-items: center;
@media (max-width: 768px) {
padding: 0;
}
.s2-body-desc {
@media (max-width: 768px) {
padding-left: 0 !important;
padding-right: 0 !important;
}
p {
color: #c9c9c9;
margin-top: 10px;
width: 100%;
//max-width: 70%;
@media (max-width: 768px) {
& {
max-width: 100%;
}
}
}
}
.s2-Desc-View {
margin: 20px 0;
align-items: center;
display: flex;
@media (max-width: 768px) {
padding-left: 0 !important;
padding-right: 0 !important;
}
.check {
display: flex;
margin: 8px 0;
i {
color: #c9c9c9;
@include transform(translateY(6px));
}
p {
color: #c9c9c9;
margin: 0 10px;
cursor: pointer;
}
}
}
._s2-Desc-View {
margin: 20px 0;
.check {
display: flex;
margin: 8px 0;
i {
color: #c9c9c9;
@include transform(translateY(6px));
}
p {
color: #c9c9c9;
margin: 0 10px;
cursor: pointer;
}
}
}
.s2-body-desc2 {
@media (max-width: 768px) {
padding-left: 0 !important;
padding-right: 0 !important;
}
p {
color: #c9c9c9;
margin-bottom: 10px;
width: 100%;
//max-width: 70%;
@media (max-width: 768px) {
& {
max-width: 100%;
}
}
}
}
}
}
}
}
.el-table {
background-color: transparent !important;
.el-table__header-wrapper {
background-color: transparent !important;
tr {
background-color: transparent !important;
th {
background-color: #f1f1f1 !important;
.cell {
color: #666;
}
}
}
}
.el-table__body-wrapper {
tr {
background-color: transparent;
td {
background-color: transparent;
color: #f1f1f1;
}
}
}
}
.view_input {
margin-top: 50px;
.col-12 {
justify-content: center;
align-items: center;
display: flex;
flex-direction: column;
p {
margin-bottom: 5px;
text-align: right;
font-family: 'dubaiM', sans-serif;
font-size: 13px;
margin-top: 5px;
color: $themeReverse;
}
}
.view-btn {
display: flex !important;
align-items: center;
justify-content: center;
//margin-top: 50px;
a {
border: 1px solid $themeReverse;
border-radius: 5px;
background-color: transparent;
@extend %defaultTransition;
&:hover {
background-color: $red;
border-color: $red;
}
}
span {
margin: 0 20px;
color: $themeReverse;
}
}
}
.el-checkbox__inner:hover {
border-color: $red;
}
.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
background-color: $red;
border-color: $red;
}
.el-checkbox__input.is-checked + .el-checkbox__label {
color: $red;
}
}
/*-------------------------------- Section 3 -----------------------------------*/
.s3-BG {
overflow: hidden;
background-color: #f2f2f2;
@media (max-width: 768px) {
& {
padding: 20px 0 !important;
}
}
.item {
margin-bottom: 50px;
.staggerItem {
align-items: center;
display: flex;
}
&.descBottom {
background-color: $themeReverse;
padding: 50px;
.txt {
h6 {
text-align: center;
}
p {
display: block;
text-align: center;
width: 100%;
max-width: 800px;
margin: 0 auto;
@media (max-width: 768px) {
& {
max-width: 100%;
}
}
}
}
}
&.reverse {
.row {
flex-direction: row-reverse;
}
.txt {
padding-left: 0;
&:lang(fa) {
padding-right: 0;
}
}
}
img {
width: 100%;
}
.txt {
padding-left: 50px;
padding-right: 0;
&:lang(fa) {
padding-right: 50px;
padding-left: 0;
}
width: 100%;
max-width: 90%;
@media (max-width: 768px) {
& {
max-width: 100%;
padding-left: 0 !important;
padding-right: 0 !important;
}
}
@media (max-width: 992px) {
margin-top: 30px;
padding-left: 0;
}
p {
color: #333333;
margin: 10px 0;
}
.list1 {
margin-top: 10px;
li {
margin-bottom: 5px;
span {
color: #898989;
text-align: justify;
}
i {
font-size: 5px;
margin: 0 5px;
color: #898989;
}
}
}
.list2 {
margin-top: 10px;
li {
margin-bottom: 5px;
span {
color: #898989;
text-align: justify;
}
i {
font-size: 12px;
margin: 0 5px;
color: #898989;
}
}
}
.s3-reading {
display: block ruby;
margin-top: 20px;
p {
color: $red;
}
i {
margin: 0 5px;
color: $red;
}
}
}
}
}
/*-------------------------------- Section 4 -----------------------------------*/
.s4-BG {
background-color: #333333;
h1 {
text-align: center;
color: $themeReverse;
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-position: under;
text-decoration-color: $red;
}
//.col-6 {
// padding: 0 10px !important;
//}
.el-table {
margin-bottom: 20px;
@include boxShadow(0 4px 16px rgba(#999, 0.3));
margin-top: 50px;
th {
text-align: center !important;
}
tr {
&:hover {
td {
background-color: $red !important;
&,
span {
color: $themeReverse;
}
}
}
td {
text-align: center !important;
span {
color: #606266;
}
}
}
}
}
}
//------------------------------- Project Page --------------------------------
.project-page {
background-color: #000000;
/*-------------------------------- Section 1 -----------------------------------*/
.s1-Img-BG {
overflow: hidden;
.parallax {
height: $sizeHeader;
align-items: center;
justify-content: center;
display: flex;
//background: $dimmer, url("/img/ProjectPage/page-title.png") no-repeat center;
background-position: center;
background-size: cover;
flex-direction: column;
h1 {
color: rgba($themeReverse, 0.7);
text-transform: uppercase;
}
}
}
/*-------------------------------- Section Categories -----------------------------------*/
.categories {
overflow: hidden;
background-color: #efefef;
padding: 15px;
display: flex;
align-items: center;
justify-content: center;
ul {
.all-categories {
display: inline-block;
margin: 0 10px;
cursor: pointer;
a {
color: #666666;
@extend %defaultTransition;
&:hover {
color: $red;
}
&.active {
color: $red;
}
}
}
}
}
/*-------------------------------- Section 2 -----------------------------------*/
.s2-BG {
background-color: #fbfbfb;
@media (max-width: 768px) {
& {
padding: 20px;
}
}
.container {
.el-table--enable-row-hover {
.el-table__body {
tr {
&:hover {
td {
background-color: $red !important;
color: $themeReverse;
}
.btn {
background: #fff !important;
color: $red !important;
&.s2-table-disable {
background: #999999 !important;
color: #fff !important;
}
}
}
}
}
}
.el-table {
th {
background-color: #f4f4f4;
.cell {
color: #000;
font-weight: bold;
}
}
.cell {
word-break: break-word !important;
}
}
.s2-table {
width: 100%;
@include boxShadow(0 4px 16px rgba(#000, 0.3));
}
.s2-table-btn {
background-color: $red !important;
@extend %defaultTransition;
border: 1px solid $red !important;
color: $themeReverse !important;
//padding: 0;
&:hover {
background-color: $themeReverse !important;
@extend %defaultTransition;
color: $red !important;
}
}
.s2-table-disable {
background-color: #999999 !important;
@extend %defaultTransition;
border: 1px solid #999999 !important;
color: $themeReverse !important;
cursor: not-allowed;
//padding: 0;
&:hover {
background-color: $themeReverse !important;
@extend %defaultTransition;
color: #999999 !important;
}
}
}
.s2-img {
width: 100%;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
margin: 10px 0;
img {
width: 100%;
height: auto;
}
}
.s2-item {
margin-top: 20px;
width: 100%;
//max-width: 70%;
@media (max-width: 768px) {
& {
max-width: 100%;
}
}
.h6 {
}
p {
color: #a8a8a8;
margin: 10px 0;
}
span {
font-size: 15px;
}
.s2-reading {
//display: inline-block;
//margin-top: 10px;
display: flex;
align-items: center;
p {
color: $red;
}
i {
margin: 0 10px;
color: $red;
@include transform(translateY(2px));
}
}
}
.s2-notFound {
display: flex;
justify-content: center;
align-items: center;
}
}
.filterTableByTags {
margin-bottom: 10px;
.tag {
display: inline-block;
margin: 0 5px;
border: 1px solid #666666;
padding: 2px 5px;
cursor: pointer;
@include borderRadius(4px);
span {
color: #666666;
}
&.active {
border-color: $red;
span {
color: $red;
}
}
}
}
}
//------------------------------- Details Project Page --------------------------------
.details-project-page {
background-color: #000000;
/*-------------------------------- Section 1 -----------------------------------*/
.s1-Img-BG {
overflow: hidden;
background-size: cover;
flex-direction: column;
.parallax {
height: $sizeHeader;
align-items: center;
justify-content: center;
display: flex;
//background: $dimmer, url("/img/ProjectPage/page-title.png") no-repeat center;
h1 {
color: rgba($themeReverse, 0.7);
text-transform: uppercase;
text-align: center;
&:lang(fa) {
color: #fff;
}
}
}
}
/*-------------------------------- Section 2 -----------------------------------*/
.s2-Img-BG {
overflow: hidden;
.parallax {
.row {
& > div {
@media (min-width: 575px) {
padding: 0;
}
}
img {
height: 100%;
width: 100%;
}
.s2-body {
background-color: #202020;
height: 100%;
width: 100%;
padding: 30px;
@media (max-width: 768px) {
padding: 20px 0;
}
.h2 {
color: $themeReverse;
//margin-top: 10px;
margin-bottom: 30px;
padding: 0;
}
.s2-body-desc {
width: 100%;
//max-width: 60%;
@media (max-width: 768px) {
//max-width: 100%;
padding-left: 0 !important;
padding-right: 0 !important;
}
span {
color: #c9c9c9;
}
}
.s2-Desc-View {
display: flex;
flex-direction: row;
margin: 30px 0;
@media (max-width: 768px) {
padding-left: 0 !important;
padding-right: 0 !important;
}
.s2-Desc {
//align-items: stretch;
//display: flex;
//flex-direction: column;
padding-top: 8px;
padding-bottom: 8px;
justify-content: center;
.h6 {
color: $themeReverse;
}
p {
color: $themeReverse;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
@media (max-width: 768px) {
max-width: 250px;
}
}
a {
color: $themeReverse;
}
}
}
}
//.s2-list-row{
// width: 100%;
// max-width: 300px;
//}
}
}
}
/*-------------------------------- Section 3 -----------------------------------*/
.s3-BG {
overflow: hidden;
.parallax {
padding: 50px;
background-color: $themeReverse;
@media (max-width: 768px) {
padding: 40px 0;
}
.container {
.s3-body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
.h6 {
text-align: center;
}
.s3-desc {
width: 100%;
max-width: 70%;
margin-top: 60px;
text-align: center;
@media (max-width: 768px) {
& {
max-width: 100%;
}
}
span {
color: #9c9999;
}
}
}
}
}
}
/*-------------------------------- Section 4 -----------------------------------*/
.s4-Img-BG {
overflow: hidden;
.parallax {
//height: 400px !important;
@media (max-width: 768px) {
height: 200px !important;
}
img {
height: 100%;
width: 100%;
@media (max-width: 768px) {
height: 200px;
object-fit: cover;
}
}
}
}
.lightBoxImages {
background-color: #f2f2f2;
padding: 30px;
position: relative;
.images {
align-items: center;
justify-content: center;
display: flex;
.btn {
font-family: 'geometria', sans-serif;
color: #666666;
border: 1px solid #666666;
//margin-right: 350px;
//padding: 0 40px;
position: absolute;
border-radius: 2px;
@extend %defaultTransition;
@media (max-width: 768px) {
//margin-right: 200px;
}
&:hover {
color: $red;
border: 1px solid $red;
@extend %defaultTransition;
}
&:lang(fa) {
font-family: 'dubaiM', sans-serif;
}
}
.hidden {
visibility: hidden;
}
}
}
/*-------------------------------- Section 5 -----------------------------------*/
.s5-BG {
overflow: hidden;
.parallax {
.row {
& > div {
@media (min-width: 575px) {
padding: 0;
}
}
.s5-Img {
img {
width: 100%;
height: 100%;
}
}
.s5-Body {
display: flex;
flex-direction: column;
justify-content: center;
padding: 0 20px !important;
background-color: $themeReverse;
@media (max-width: 768px) {
padding: 0 !important;
}
.s5-Title {
position: relative;
margin-top: 30px;
.h6 {
// border-bottom: 1px solid #9c9c9c;
&::before {
content: '';
position: absolute;
left: 0;
bottom: -20px;
height: 1px;
width: 10%; /* or 100px */
border-bottom: 2px solid #d8d8d8;
}
&:lang(fa) {
&::before {
right: 0 !important;
left: auto;
}
}
}
}
.s5-desc {
margin: 50px 0;
width: 100%;
max-width: 70%;
@media (max-width: 768px) {
& {
max-width: 100%;
}
}
span {
color: #9c9c9c;
}
}
}
}
}
}
/*-------------------------------- Section 6 -----------------------------------*/
.s6-BG {
overflow: hidden;
.parallax {
.row {
& > div {
@media (min-width: 575px) {
padding: 0;
}
}
.s6-Img {
img {
width: 100%;
height: 100%;
}
}
.s6-Body {
display: flex;
flex-direction: column;
justify-content: center;
padding: 0 20px !important;
background-color: #151515;
@media (max-width: 768px) {
padding: 0 !important;
}
.s6-Title {
position: relative;
margin-top: 30px;
.h6 {
color: #fff;
&::before {
content: '';
position: absolute;
left: 0;
bottom: -20px;
height: 1px;
width: 10%; /* or 100px */
border-bottom: 2px solid #d8d8d8;
}
&:lang(fa) {
&::before {
right: 0 !important;
left: auto;
}
}
}
}
.s6-desc {
margin: 50px 0;
width: 100%;
max-width: 80%;
@media (max-width: 768px) {
& {
max-width: 100%;
}
}
span {
color: #9c9c9c;
}
}
}
}
}
}
/*-------------------------------- Section 7 -----------------------------------*/
.s7-BG {
overflow: hidden;
background-color: #fbfbfb;
.parallax {
padding: 50px;
.container {
.s7-body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
.h6 {
text-align: center;
}
.s7-desc {
text-align: center;
span {
color: #9c9999;
}
}
}
}
}
}
}
//------------------------------- Gallery Page --------------------------------
.gallery-page {
//background-color: #000000;
/*-------------------------------- Section 1 -----------------------------------*/
.s1-Img-BG {
overflow: hidden;
.parallax {
height: $sizeHeader;
align-items: center;
justify-content: center;
display: flex;
//background: $dimmer, url("/img/GalleryPage/page-title.png") no-repeat center;
background-position: center;
background-size: cover;
h1 {
color: rgba($themeReverse, 0.7);
text-transform: uppercase;
}
}
}
/*-------------------------------- Section 2 -----------------------------------*/
.s2-BG {
overflow: hidden;
background-color: #efefef;
padding: 15px;
display: flex;
align-items: center;
justify-content: center;
ul {
.s2-all-cat {
display: inline-block;
margin: 0 10px;
a {
color: #666666;
@extend %defaultTransition;
&:hover {
color: $red;
}
&.active {
color: $red;
}
}
}
}
}
/*-------------------------------- Section 3 -----------------------------------*/
.s3-BG {
overflow: hidden;
background-color: #ffffff;
@media (max-width: 768px) {
padding: 20px 0 !important;
}
.imgBox {
padding: 7px;
border: 1px solid #cccccc;
border-radius: 5px;
margin-bottom: 10px;
cursor: pointer;
@include transition(0.3s);
@include boxShadow(0 2px 8px rgba(#000, 0.2));
&:hover {
@include transform(scale(1.01));
}
img {
width: 100%;
object-fit: cover;
border-radius: 5px;
}
h4 {
color: $themeSecond;
text-align: center;
}
@media (max-width: 768px) {
& {
padding: 5px;
}
}
@media (max-width: 575px) {
& {
padding: 2px;
}
}
//a {
// width: 100%;
// height: 100%;
// @include boxSizing(border-box);
// overflow: hidden;
// ////////
// img {
// width: 100%;
// height: 100%;
// object-fit: cover;
// @include transition(0.3s);
// }
//
// &:hover {
// img {
// @include transform(scale(1.01));
// }
// }
//}
}
.gallery--row {
direction: ltr !important;
//.row {
// padding: 0 15px !important;
// //@media (max-width: 768px) {
// // padding: 0 !important;
// //}
//
//
// & > div {
// padding: 0 !important;
// }
//}
.imgBox {
padding: 7px;
@media (max-width: 768px) {
& {
padding: 5px;
}
}
@media (max-width: 575px) {
& {
padding: 2px;
}
}
a {
width: 100%;
height: 100%;
@include boxSizing(border-box);
overflow: hidden;
////////
img {
width: 100%;
height: 100%;
object-fit: cover;
@include transition(0.3s);
}
&:hover {
img {
@include transform(scale(1.01));
}
}
}
}
.top {
height: 500px;
@media (max-width: 768px) {
height: 400px;
}
@media (max-width: 400px) {
& {
height: 250px;
}
}
.left {
height: 100%;
.imgBox {
width: 100%;
//height: 85%;
height: 100%;
}
.txtBox {
width: 100%;
height: 15%;
padding: 7px;
direction: ltr !important;
overflow: hidden;
@include boxSizing(border-box);
display: flex;
align-items: center;
justify-content: space-between;
@media (max-width: 768px) {
& {
padding: 5px;
display: block;
}
}
@media (max-width: 575px) {
& {
padding: 2px;
display: block;
}
}
img {
width: auto;
height: 80%;
@media (max-width: 768px) {
& {
font-size: 20px;
margin-top: 10px;
}
}
@media (max-width: 575px) {
& {
font-size: 30px;
}
}
@media (max-width: 420px) {
& {
font-size: 25px;
}
}
@media (max-width: 400px) {
& {
margin-top: 0;
}
}
@media (max-width: 330px) {
& {
font-size: 20px;
}
}
@media (max-width: 275px) {
& {
font-size: 16px;
}
}
}
p {
direction: ltr !important;
font-size: 16px;
text-align: left;
margin: 10px 20px;
@media (max-width: 992px) {
& {
//font-size: 16px;
//margin-top: -5px;
display: none;
}
}
//@media (max-width: 575px) {
// & {
// display: none;
// }
//}
}
}
}
.right {
height: 100%;
.imgBox {
height: 50%;
}
}
}
.bottom {
height: 200px;
@media (max-width: 768px) {
& {
height: 300px;
}
}
@media (max-width: 400px) {
& {
height: 150px;
}
}
& > div {
height: 100%;
}
.imgBox {
height: 100%;
}
}
&.gallery--row-reverse {
direction: rtl !important;
}
}
.s3-notFound {
display: flex;
justify-content: center;
align-items: center;
}
}
}
//------------------------------- Catalog Page --------------------------------
.catalog-page {
background-color: #000000;
/*-------------------------------- Section 1 -----------------------------------*/
.s1-Img-BG {
overflow: hidden;
.parallax {
height: $sizeHeader;
align-items: center;
justify-content: center;
display: flex;
//background: $dimmer, url("/img/CatalogPage/page-title.png") no-repeat center;
background-position: center;
background-size: cover;
h1 {
color: rgba($themeReverse, 0.7);
text-transform: uppercase;
}
}
}
/*-------------------------------- Section 2 -----------------------------------*/
.s2-BG {
overflow: hidden;
background-color: #fbfbfb;
@media (max-width: 768px) {
padding: 10px 0;
}
.parallax {
@media (min-width: 992px) {
padding: 20px;
}
.container {
.s2-item {
display: block;
width: 100%;
background-color: #fff;
@include boxShadow(0 4px 16px rgba(#000, 0.3));
@media (max-width: 992px) {
margin-top: 20px;
}
img {
width: 100%;
height: auto;
}
.s2-body {
background-color: #efedee;
display: flex;
justify-content: center;
align-items: center;
padding: 15px 0;
a {
color: $red;
border: 1px solid $red;
background-color: transparent;
border-radius: 4px;
padding: 15px 30px;
@extend %defaultTransition;
&:hover {
background: $red;
color: #fff;
}
}
.h6 {
margin: 20px 0;
color: #9f9f9f;
}
p {
color: #a8a8a8;
}
}
}
.s2-notFound {
display: flex;
justify-content: center;
align-items: center;
}
}
}
}
}
//------------------------------- Contact Page --------------------------------
.contact-page {
background-color: #000000;
/*-------------------------------- Section 1 -----------------------------------*/
.s1-Img-BG {
overflow: hidden;
.parallax {
height: $sizeHeader;
padding: 100px 0;
align-items: center;
justify-content: center;
display: flex;
background: $dimmer, url('/img/ContactPage/landmark.png') no-repeat center;
background-size: cover;
h1 {
color: rgba($themeReverse, 0.7);
text-transform: uppercase;
}
}
}
/*-------------------------------- Section 2 -----------------------------------*/
.s2 {
overflow: hidden;
.parallax {
.row {
.slick-next {
font-size: 0;
line-height: 0;
position: absolute;
top: 50%;
display: block;
width: 80px;
height: 100%;
padding: 0;
transform: translate(-30%, -50%);
cursor: pointer;
color: transparent;
border: none;
outline: none;
background: transparent;
background: linear-gradient(to left, rgba(#000, 0.7), rgba(#000, 0) 90%);
z-index: 1;
&:lang(en) {
transform: translate(-61%, -50%);
}
}
.slick-prev {
font-size: 0;
line-height: 0;
position: absolute;
top: 50%;
display: block;
width: 80px;
height: 100%;
padding: 0;
transform: translate(30%, -50%);
cursor: pointer;
color: transparent;
border: none;
outline: none;
background: transparent;
background: linear-gradient(to right, rgba(#000, 0.7), rgba(#000, 0) 90%);
z-index: 1;
&:lang(en) {
transform: translate(31%, -50%);
}
}
.s2-item {
height: 100%;
@media (min-width: 768px) {
padding-left: 0 !important;
padding-right: 0 !important;
}
.s2-img {
padding: 40px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 350px;
display: flex;
align-items: stretch;
flex-direction: column;
justify-content: stretch;
//@media (max-width: 768px) {
// & {
// padding: 40px;
// }
//}
.h4 {
color: $themeReverse;
border-bottom: 2px solid $themeReverse;
display: inline;
width: 50%;
@media (max-width: 768px) {
width: 100%;
}
}
.s2-desc {
color: $themeReverse;
margin-top: 20px;
width: 100%;
max-width: 80%;
margin-bottom: auto;
@media (max-width: 768px) {
& {
max-width: 100%;
}
}
}
.s2-tel {
margin-top: 30px;
p {
}
ul {
li {
display: block;
margin-bottom: 10px;
b,
a {
color: $themeReverse;
}
a {
@extend %defaultTransition;
display: inline-block;
&:hover {
color: $red;
}
}
}
}
}
&.s2-Img-col1 {
background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url('/img/ContactPage/g1.png');
}
&.s2-Img-col2 {
background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url('/img/ContactPage/g2.png');
}
&.s2-Img-col3 {
background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url('/img/ContactPage/g3.png');
}
&.s2-Img-col4 {
background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)),
url('/img/ContactPage/tehran.jpg');
}
&.s2-Img-col5 {
background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)),
url('/img/ContactPage/ahvaz.jpg');
}
&.s2-Img-col6 {
background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)),
url('/img/ContactPage/ahvaz1.jpg');
}
&.s2-Img-col7 {
background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)),
url('/img/ContactPage/esfahan.jpg');
}
}
}
}
}
}
/*--------------------------------Section 3 -----------------------------------*/
.s3 {
.parallax {
background-color: #f5f5f5;
@media (max-width: 768px) {
padding: 20px 0 !important;
}
.row {
//.col-12 {
// padding-left: 40px !important;
// padding-right: 40px !important;
//}
.info {
//padding: 40px 0;
//@media (max-width: 768px) {
// & {
// padding: 10px 0;
// }
//}
.s3-title-col1 {
.h6 {
color: $theme;
border-bottom: 3px solid #d8d8d8;
display: inline;
padding: 10px 0;
}
}
.s3-desc-col1 {
margin: 40px 0;
p {
color: #666666;
}
}
.s3-input {
flex-direction: column;
.input {
background-color: $themeReverse;
color: $theme;
border: 0;
margin-top: 10px;
padding: 20px;
width: 100%;
box-sizing: border-box;
}
textarea {
resize: vertical;
}
.btnSub {
padding: 30px 0;
.btn-link {
background-color: #2f2f2f;
padding: 10px 30px;
color: #ffffff;
}
}
.err {
p {
margin-top: 3px;
color: $red;
}
input,
textarea {
border: 1px solid $red;
}
}
}
}
.location {
//padding: 40px !important;
//@media (max-width: 768px) {
// padding-top: 0 !important;
// padding-bottom: 0 !important;
//}
.s3-title-col2 {
margin-bottom: 20px;
.h6 {
color: $theme;
border-bottom: 3px solid #d8d8d8;
display: inline;
padding: 10px 0;
}
}
.s3-address {
margin: 40px 0;
P {
color: #666666;
}
}
.email {
display: inherit;
color: #666666;
margin-top: 30px;
span {
a {
color: #666666;
@extend %defaultTransition;
&:hover {
color: $red;
@extend %defaultTransition;
}
}
}
}
.tel {
color: #666666;
margin: 10px 0;
span {
a {
display: inline-block !important;
direction: ltr !important;
color: #666666;
@extend %defaultTransition;
&:hover {
color: $red;
@extend %defaultTransition;
}
}
}
}
.s3-title-col2-row2 {
margin-top: 50px;
.h6 {
color: $theme;
border-bottom: 3px solid #d8d8d8;
display: inline;
margin-bottom: 10px;
}
}
}
}
}
}
}
//------------------------------- Consents Page --------------------------------
.consents-page {
background-color: #f1f1f1;
/*-------------------------------- Section 1 -----------------------------------*/
.s1-Img-BG {
overflow: hidden;
.parallax {
height: $sizeHeader;
align-items: center;
justify-content: center;
display: flex;
//background: $dimmer, url("/img/GalleryPage/page-title.png") no-repeat center;
background-position: center;
background-size: cover;
h1 {
color: rgba($themeReverse, 0.7);
text-transform: uppercase;
}
}
}
/*-------------------------------- Section 2 -----------------------------------*/
.s2-Img-BG {
.parallax {
.view-img {
margin-bottom: 10px;
.img {
width: 100%;
text-align: center;
@extend %defaultTransition;
@include boxShadow(0 5px 20px rgba(#000, 0.7));
}
}
}
}
}
//------------------------------- Search Page --------------------------------
.search_page {
min-height: 89vh;
/*-------------------------------- Section 1 -----------------------------------*/
.s1-Img-BG {
overflow: hidden;
.parallax {
height: $sizeHeader;
align-items: center;
justify-content: center;
display: flex;
//background: $dimmer, url("/img/GalleryPage/page-title.png") no-repeat center;
background-position: center;
background-size: cover;
h1 {
color: rgba($themeReverse, 0.7);
text-transform: uppercase;
}
}
}
/*-------------------------------- Section 2 -----------------------------------*/
.s2 {
.view-items {
margin: 20px 0;
h2 {
border-bottom: 2px solid $red;
padding-bottom: 5px;
margin-bottom: 10px;
}
.view-item {
margin: 20px 0;
cursor: pointer;
@extend %defaultTransition;
p {
font-weight: bold;
}
&:hover {
p {
color: $red;
}
}
}
}
}
}
//------------------------------- PWA Page --------------------------------
.pwa--page {
margin-top: 70px;
min-height: calc(100vh - 95px);
width: 100%;
padding-top: 100px;
h2,
span,
a {
font-family: 'dubaiM', sans-serif;
}
.section-title {
margin-bottom: 30px;
flex-direction: column;
display: flex;
align-items: center;
.s9-Desc {
display: inline-flex;
// align-items: center;
i {
color: $red;
font-size: 10px;
margin: 5px;
}
}
h2 {
color: #000000;
text-align: center;
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-position: under;
text-decoration-color: $red;
margin-bottom: 20px;
}
}
}