/*
ProVision Co.
-------------
This web application design and development by ProVision Co.
All source files, presentable or core, graphics and layout are owned/controlled by ProVision, and no one, entity or individual, can use/modify/destribute at anytime or to anywhere without a written approval from ProVision.
This website/web app is based on LegionCMS engine, which is a MVC platform built completely from scratch by ProVision's team.
-We know that you like this code, if you are interested joing our team, dont hesitate sending your CV to us.
--------------
Omar Shamali
https://provision.ps
*/
body{font-family:truesign;}
#canvas {
position: absolute;
}
#cal_result .section_head {
margin-top: 25px;
}
#introLogo {
height: 60vh;
}
.lang {
z-index: 10;
color: white;
position: absolute;
right: 10vw;
top: 5vh;
}
#scroller {
position: absolute;
bottom: 0;
width: 100%;
}
.lang_item i {
margin-right: 10px;
}
.lang_item {
background: #51515180;
padding: 9px 10px;
}
#intro{
background:#333;height: 100vh;}
#intro .section_content{
text-align: center;
}
#intro picture img{
width:auto;
}
.section_content {
width: 100%;
height: 100%;
padding: 100px;
}
#services {
background: #525152;
text-align: center;
}
.section_head {
color: white;
font-size: 40px;
text-align: center;
margin-bottom: 30px;
}
.more {
color: #989898;
}
.service_home_box {
margin-bottom: 30px;
width: 30%;
padding: 30px;
height: 70%;
color: white;
min-height: 450px;
}
.container {
position: relative;
width: 32px;
height: 60px;
overflow: hidden;
margin: auto;
}
.chevron {
position: absolute;
width: 28px;
height: 8px;
opacity: 0;
transform: scale3d(0.5, 0.5, 0.5);
animation: move 3s ease-out infinite;
}
.chevron:first-child {
animation: move 3s ease-out 1s infinite;
}
.chevron:nth-child(2) {
animation: move 3s ease-out 2s infinite;
}
.chevron:before,
.chevron:after {
content: ' ';
position: absolute;
top: 0;
height: 100%;
width: 51%;
background: #fff;
}
.chevron:before {
left: 0;
transform: skew(0deg, 30deg);
}
.chevron:after {
right: 0;
width: 50%;
transform: skew(0deg, -30deg);
}
@keyframes move {
25% {
opacity: 1;
}
33% {
opacity: 1;
transform: translateY(30px);
}
67% {
opacity: 1;
transform: translateY(40px);
}
100% {
opacity: 0;
transform: translateY(55px) scale3d(0.5, 0.5, 0.5);
}
}
.text {
display: block;
margin-top: 75px;
margin-left: -30px;
font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
font-size: 12px;
color: #fff;
text-transform: uppercase;
white-space: nowrap;
opacity: .25;
animation: pulse 2s linear alternate infinite;
}
@keyframes pulse {
to {
opacity: 1;
}
}
.service_home_box h2 {
font-size: 30px;
font-weight: bold;
}
.service_home_box i {
font-size: 83px;
}
.service_home_box p {
font-size: 20px;
margin-top: 33px;
background: #fff6;
color: black;
padding: 10px;
}
#team .section_content {
text-align: center;
}
#team .section_head{
color: #5f4c03;
}
.team_member_box {
width: 21%;
padding: 38px;
}
.team_member_box picture {
width: 150px;
height: 150px;
overflow: hidden;
border: red 3px solid;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-khtml-border-radius: 50%;
}
.team_member_box picture img{
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-khtml-border-radius: 50%;
}
.team_member_box h2 {
font-size: 26px;
margin: 13px 0;
}
#team {
background: #f1c418;
}
.button {
padding: 15px 25px;
font-size: 24px;
text-align: center;
outline: none;
color: #030f20;
background-color: #2bbcff;
border: none;
border-radius: 15px;
box-shadow: 0px 6px #509aed;
display: block;
width: 300px;
margin: auto;
}
.button:hover {background-color: #f1c418}
.button:active {
background-color: #ce3635;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
strong{
font-weight: bold;
}
#q{
color: white;
text-align: center;
background:#333;
}
.qnum span {
width: 50px;
height: 50px;
display: inline-block;
background: white;
color: black;
text-align: center;
line-height: 50px;
border-radius: 100px;
margin-right: 20px;
margin-top: 34px;
margin-bottom: 30px;
}
.radio_service {
background: #4a4a4a;
padding: 10px 20px;
}
#words_numbers input,#langs_choose select {
background: #4a4a4a;
border: none;
height: 41px;
padding: 10px 20px;
min-width: 200px;
color: white;
text-align: center;
font-size: 18px;
}
#q .section_content {
text-align: center;
}
#q #getQ {
display: unset;
position: unset;
}
.center {
padding-left: 10%;
font-size: 22px;
}
.center_info_line i {
margin-right: 14px;
color: white;
}
.center_info {
max-width: 80%;
vertical-align: top;
}
#call {
background: #ce3635;
color: white;
}
.right_center {
width: 50%;
}
#cal_result {
margin-top: 50px;
}
.confirm_info {
width: 200px;
text-align: center;
background: #1ba21b;
padding: 20px;
font-weight: bold;
font-size: 20px;
border: 1px solid #fff9;
}
.rex_box_title {
margin-bottom: 10px;
text-align: center;
}
#right_head {
position: absolute;
right: 15px;
top: 23px;
}
a.logo {
margin-left: 20px;
}
header {
position: fixed;
z-index: 11;
width: 100%;
background: white;
top: 0;
}
#right_head .pointer {
background: #fbbc00;
color: white;
padding: 4px;
}
#in_page .section_head {
width: 100%;
background: var(--mainColor);
padding: 50px;
text-align: center;
}
.p_content {
padding: 50px;
}
.single-service .section_head {
margin-bottom: unset;
}
.p_summery {
text-align: center;
background: whitesmoke;
padding: 20px;
}
.active_radio {
background: orange !important;
color: #2d0808;
}
#right_q input {
width: 300px;
height: 40px;
text-align: center;
font-size: 14px;
margin-bottom: 17px;
}
#right_q .btn {
color: white;
font-weight: bold;
}
#right_q picture {
width: 70px;
vertical-align: middle;
margin-right: 17px;
}
#left_q {
width: 50%;
}
#right_q {
width: 50%;
text-align: center;
}
#clippy_q {
clip-path: polygon(100% 1%, 50% 0%, 52.89% 40.57%, 42.43% 104.78%, 47.06% 100.36%, 99.88% 100.31%);
width: 100%;
background: #292929;
height: 105%;
position: absolute;
top: -5%;
right: 0;
}
#pattern_bg{
background:
radial-gradient(black 3px, transparent 4px),
radial-gradient(black 3px, transparent 4px),
linear-gradient(#fff 4px, transparent 0),
linear-gradient(45deg, transparent 74px, transparent 75px, #a4a4a4 75px, #a4a4a4 76px, transparent 77px, transparent 109px),
linear-gradient(-45deg, transparent 75px, transparent 76px, #a4a4a4 76px, #a4a4a4 77px, transparent 78px, transparent 109px),
#fff;
background-size: 109px 109px, 109px 109px,100% 6px, 109px 109px, 109px 109px;
background-position: 54px 55px, 0px 0px, 0px 0px, 0px 0px, 0px 0px;
opacity: 0.03;
width:60%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.video {
width: 25%;
padding:5px;
}
#testi {
background:
radial-gradient(black 15%, transparent 16%) 0 0,
radial-gradient(black 15%, transparent 16%) 8px 8px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
background-color:#1f1c1c;
background-size:16px 16px;
}
.big_vid {
width: 100% !important;
height: 50vh;
display: block;
}