.tax-product_brand .brand-description{overflow:hidden;zoom:1}.tax-product_brand .brand-description img.brand-thumbnail{width:25%;float:right}.tax-product_brand .brand-description .text{width:72%;float:left}.widget_brand_description img{box-sizing:border-box;width:100%;max-width:none;height:auto;margin:0 0 1em}ul.brand-thumbnails{margin-left:0;margin-bottom:0;clear:both;list-style:none}ul.brand-thumbnails:before{clear:both;content:"";display:table}ul.brand-thumbnails:after{clear:both;content:"";display:table}ul.brand-thumbnails li{float:left;margin:0 3.8% 1em 0;padding:0;position:relative;width:22.05%}ul.brand-thumbnails.fluid-columns li{width:auto}ul.brand-thumbnails:not(.fluid-columns) li.first{clear:both}ul.brand-thumbnails:not(.fluid-columns) li.last{margin-right:0}ul.brand-thumbnails.columns-1 li{width:100%;margin-right:0}ul.brand-thumbnails.columns-2 li{width:48%}ul.brand-thumbnails.columns-3 li{width:30.75%}ul.brand-thumbnails.columns-5 li{width:16.95%}ul.brand-thumbnails.columns-6 li{width:13.5%}.brand-thumbnails li img{box-sizing:border-box;width:100%;max-width:none;height:auto;margin:0}@media screen and (max-width:768px){ul.brand-thumbnails:not(.fluid-columns) li{width:48%!important}ul.brand-thumbnails:not(.fluid-columns) li.first{clear:none}ul.brand-thumbnails:not(.fluid-columns) li.last{margin-right:3.8%}ul.brand-thumbnails:not(.fluid-columns) li:nth-of-type(odd){clear:both}ul.brand-thumbnails:not(.fluid-columns) li:nth-of-type(even){margin-right:0}}.brand-thumbnails-description li{text-align:center}.brand-thumbnails-description li .term-thumbnail img{display:inline}.brand-thumbnails-description li .term-description{margin-top:1em;text-align:left}#brands_a_z h3:target{text-decoration:underline}ul.brands_index{list-style:none outside;overflow:hidden;zoom:1}ul.brands_index li{float:left;margin:0 2px 2px 0}ul.brands_index li a,ul.brands_index li span{border:1px solid #ccc;padding:6px;line-height:1em;float:left;text-decoration:none}ul.brands_index li span{border-color:#eee;color:#ddd}ul.brands_index li a:hover{border-width:2px;padding:5px;text-decoration:none}ul.brands_index li a.active{border-width:2px;padding:5px}div#brands_a_z a.top{border:1px solid #ccc;padding:4px;line-height:1em;float:right;text-decoration:none;font-size:.8em}* {
padding: 0;
margin: 0;
box-sizing: border-box;
text-decoration: none;
list-style: none;
font-family: 'Tajawal', sans-serif;
}
:root {
--main-color: #1F5FFF;
--second-color: #04CE78;
--dark-color: #000D44;
--parg-color: #666666;
--name-item: #0066c0;
--drak-red: #d01418;
--border-color: #6666662a;
--border: 1px solid #6666662c;
}
body {
direction: rtl;
}
html {
scroll-behavior: smooth;
}
h1,h2,h3,h4,h5,h6{
color: var(--dark-color);
}
p {
color: var(--parg-color);
}
.container{
width: 75%;
margin: auto
}
section{
padding: 50px 0;
}
.btn{
padding: 13px 40px;
background: var(--main-color);
color: #fff;
font-size: 18px;
border-radius: 5px;
font-weight: bold;
border: 2px solid var(--main-color);
transition: 0.3s ease;
scale: 1;
}
.btn:hover{
scale: 1.2;
}
.top_sec{
text-align: center;
margin-bottom: 50px;
}
.top_sec h3{
background: var(--main-color);
width: max-content;
margin: 0 auto 30px;
padding: 10px 30px;
border-radius: 30px;
color: #fff;
}
.top_sec p{
font-size: 25px;
font-weight: 600;
color: var(--dark-color);
} .top_sec_page{
background: url(//www.wajehat-ahjar.com/wp-content/themes/CityStone/assets/img/hero_bg_4_1.png);
background-size: cover;
background-position: right bottom;
}
.top_sec_page .container{
display: flex;
justify-content: center;
align-items: center;
height: 100%;
position: relative;
padding: 140px 0;
}
.top_sec_page h3{
font-size: 50px;
color: var(--main-color);
} .top_sec_page .shape{
position: absolute;
}
.top_sec_page .shape1{
top: 80px;
right: 10px;
}
.top_sec_page .shape2{
top: 80px;
left: 0;
}
.top_sec_page .shape3{
bottom: 80px;
right: 10px;
}
.top_sec_page .shape4{
bottom: 80px;
left: 0;
}
.top_sec_page .shape1,
.top_sec_page .shape2{
animation: rotate linear infinite 9s;
}
@keyframes rotate{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
.top_sec_page .shape3{
animation: movetop3 linear infinite 2.5s;
}
.top_sec_page .shape4{
animation: movetop4 linear infinite 3s;
}
@keyframes movetop3{
0%{
bottom: 80px;
}
50%{
bottom: 110px;
}
100%{
bottom: 80px;
}
}
@keyframes movetop4{
0%{
bottom: 80px;
}
50%{
bottom: 40px;
}
100%{
bottom: 80px;
}
}
@media(max-width:1450px){
.container{
width: 90%;
}
}
@media(max-width:1000px){
.top_sec_page .container{
flex-direction: column;
justify-content: center;
gap: 50px;
}
.top_sec_page .container .div_text{
width: 100%;
}
.top_sec_page .container .div_img{
width: 80%;
}
}
@media(max-width:500px){
.container{
width: 95%;
}
.top_sec h3{
font-size: 30px;
}
.top_sec p{
font-size: 15px;
}
.top_sec_page .shape1{
top: 30px;
}
.top_sec_page .shape2{
top: 30px;
}
.top_sec_page .shape1 img{
width: 35px;
}
.top_sec_page .shape2 img{
width: 20px;
}
.top_sec_page .shape3 img{
width: 35px;
}
.top_sec_page .shape4 img{
width: 40px;
}
.top_sec_page{
height: auto;
}
.top_sec_page .container{
padding: 100px 0;
}
.top_sec_page .container .div_img{
width: 100%;
}
.top_sec_page .div_text{
text-align: center;
}
.top_sec_page .div_text h1{
font-size: 35px;
}
.top_sec_page .div_text .div{
flex-direction: column;
}
.top_sec_page .div_text h6{
margin-inline: auto;
}
.top_sec_page h3{
font-size: 40px;
}
} .hero{
background: url(//www.wajehat-ahjar.com/wp-content/themes/CityStone/assets/img/hero_bg_4_1.png);
background-size: cover;
background-position: right bottom;
height: 100vh;
}
.hero .container{
display: flex;
justify-content: space-between;
align-items: center;
height: 100%;
position: relative;
}
.hero .container .div_text{
width: 44%;
}
.hero .container .div_img{
width: 55%;
}
.hero .container .div_img img{
width: 100%;
}
.hero .div_text h6{
background: var(--main-color);
width: max-content;
margin: 0 0 30px;
padding: 10px 30px;
border-radius: 30px;
color: #fff;
}
.hero .div_text h1{
font-size: 60px;
margin-bottom: 40px;
}
.hero .container .div_text p{
color: var(--dark-color);
margin-bottom: 30px;
line-height: 1.5;
font-size: 18px;
}
.hero .div_text h1 span{
color: var(--second-color);
}
.hero .div_text .div{
display: flex;
align-items: center;
margin-bottom: 50px;
gap: 20px;
}
.hero .div_text .btn_White{
background: #fff;
padding: 12px 20px;
font-size: 18px;
font-weight: bold;
color: var(--dark-color);
border-radius: 10px;
transition: 0.3s ease-in-out;
}
.hero .div_text .btn_White:hover{
background: var(--second-color);
color: #fff;
}
.hero .div_text .happy_clinet{
display: flex;
align-items: center;
gap: 10px;
color: var(--dark-color);
font-size: 18px;
} .hero .shape{
position: absolute;
}
.hero .shape1{
top: 80px;
right: 10px;
}
.hero .shape2{
top: 80px;
left: 0;
}
.hero .shape3{
bottom: 80px;
right: 10px;
}
.hero .shape4{
bottom: 80px;
left: 0;
}
.hero .shape1,
.hero .shape2{
animation: rotate linear infinite 9s;
}
@keyframes rotate{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
.hero .shape3{
animation: movetop3 linear infinite 2.5s;
}
.hero .shape4{
animation: movetop4 linear infinite 3s;
}
@keyframes movetop3{
0%{
bottom: 80px;
}
50%{
bottom: 110px;
}
100%{
bottom: 80px;
}
}
@keyframes movetop4{
0%{
bottom: 80px;
}
50%{
bottom: 40px;
}
100%{
bottom: 80px;
}
} .about .container{
display: flex;
justify-content: space-between;
align-items: center;
}
.about .container .div_img{
width: 40%;
text-align: left;
position: relative;
}
.about .container .div_img img{
width: 100%;
border-radius: 40px;
}
.about .container .div_img .div_cont{
position: absolute;
top: 50%;
transform: translateY(-50%);
background: #fff;
padding: 40px;
text-align: center;
border-radius: 20px;
width: 250px;
border: 2px solid var(--main-color);
right: -125px;
animation: aboutan 6s  infinite ease;
}
@keyframes aboutan{
0%{
top: 40%;
}
50%{
top: 60%;
}
100%{
top: 40%;
}
}
.about .container .div_img .div_cont .div_Svg{
width: 70px;
height: 70px;
padding: 15px;
background: #e7e7e7;
border-radius: 100%;
transition: 0.3s ease-in-out;
text-align: center;
margin: auto;
margin-bottom: 10px;
}
.about .container .div_img .div_cont:hover .div_Svg{
background: var(--main-color);
}
.about .container .div_img .div_cont .div_Svg svg{
width: 100%;
fill: var(--dark-color);
transition: 0.3s ease-in-out;
}
.about .container .div_img .div_cont:hover .div_Svg svg{
fill: #fff;
}
.about .container .div_img .div_cont span{
color: var(--main-color);
font-size: 20px;
font-weight: bold;
}
.about .container .div_img .div_cont h3{
font-size: 16px;
color: var(--dark-color);
margin-top: 15px;
}
.about .text{
width: 45%;
}
.about .text h5{
color: var(--main-color);
font-size: 28px;
}
.about .text h2{
font-size: 50px;
margin-top: 20px;
}
.about .text p{
margin-top: 30px;
line-height: 1.7;    
}
.about .text .phone{
background: #dbe6f6;
padding: 15px 25px 15px 80px;
border-radius: 5px;
display: flex;
align-items: center;
gap: 25px;
border-left: 2px solid var(--main-color);
width: max-content;
margin: 30px 0 50px;
}
.about .text .phone svg{
width: 70px;
}
.about .text .phone p{
margin-top: 0;
margin-bottom: 10px;
font-size: 18px;
color: var(--dark-color);
}
.about .text .phone h6{
font-size: 30px;
font-weight: bold;
} .hatem_sec .container{
display: flex;
justify-content: space-between;
margin-top: 150px;
}
.hatem_sec .container .box{
width: 22%;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
gap: 20px;
position: relative;
}
.hatem_sec .container .box:nth-child(2),
.hatem_sec .container .box:nth-child(4){
top: -60px;
}
.hatem_sec .container .box:nth-child(2) .div_img::after{
content: "2";
}
.hatem_sec .container .box:nth-child(3) .div_img::after{
content: "3";
}
.hatem_sec .container .box:nth-child(4) .div_img::after{
content: "4";
}
.hatem_sec .container .box .div_img{
background: var(--second-color);
width: 50%;
margin: auto;
padding: 40px;
border-radius: 30px;
position: relative;
}
.hatem_sec .container .box .div_img::after{
position: absolute;
content: "1";
width: 40px;
height: 40px;
top: -15px;
right: -15px;
background: var(--main-color);
border-radius: 50%;
text-align: center;
line-height: 40px;
color: #fff;
font-weight: bold;
font-size: 16px;
} 
.hatem_sec .container .box .div_img img{
width: 100%;
}
.hatem_sec .container .box h3{
font-size: 20px;
}
.hatem_sec .container .box p{
font-size: 18px;
line-height: 1.6;
} .sm_sec{
position: relative;
padding: 100px 0;
width: 100%;
background: #fff;
text-align: center;
}
.sm_sec .container{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.sm_sec .container .box{
width: 22%;
display: flex;
flex-direction: column;
align-items: center;
}
.sm_sec .container .box .div_img{
mask-image: url(//www.wajehat-ahjar.com/wp-content/themes/CityStone/assets/img/process_box_bg.png);
height: 156px;
mask-size: 100% 100%;
position: relative;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
.sm_sec .container .box .img_border{
background: url(//www.wajehat-ahjar.com/wp-content/themes/CityStone/assets/img/dotted_bg_1.png);
width: 154px;
height: 172px;
padding: 8px 8px 8px 8px;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
margin-bottom: 30px;
}
.sm_sec .container .box .img_border p{
background: var(--second-color);
width: 36px;
height: 40px;
line-height: 40px;
font-size: 18px;
font-weight: 600;
color: #fff;
position: absolute;
bottom: 0;
left: calc(50% - 18px);
-webkit-clip-path: path("M16.8293 0.872822L1.15962 9.76303C0.441905 10.1702 0 10.9214 0 11.7342V29.5255C0 30.3435 0.447543 31.0987 1.1725 31.5039L16.8486 40.2672C17.5622 40.6662 18.4378 40.6661 19.1514 40.2671L34.8278 31.5011C35.5526 31.0957 36 30.3407 36 29.5228V11.8415C36 11.0326 35.5623 10.2845 34.8501 9.87582L19.1674 0.878402C18.4458 0.464403 17.5529 0.46229 16.8293 0.872822Z");
clip-path: path("M16.8293 0.872822L1.15962 9.76303C0.441905 10.1702 0 10.9214 0 11.7342V29.5255C0 30.3435 0.447543 31.0987 1.1725 31.5039L16.8486 40.2672C17.5622 40.6662 18.4378 40.6661 19.1514 40.2671L34.8278 31.5011C35.5526 31.0957 36 30.3407 36 29.5228V11.8415C36 11.0326 35.5623 10.2845 34.8501 9.87582L19.1674 0.878402C18.4458 0.464403 17.5529 0.46229 16.8293 0.872822Z");
text-align: center;
margin: 0;
}
.sm_sec .container .box:nth-child(2) .img_border p,
.sm_sec .container .box:nth-child(4) .img_border p{
background: var(--main-color);
}
.sm_sec .container .box .img_border img{
width: 100%;
height: 100%;
}
.sm_sec .container .box .content h4{
font-size: 25px;
margin-bottom: 20px;
}
.sm_sec .container .box .content p{
line-height: 1.7;
} .services {
background: #ffffff;
}
.services .boxs{
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
}
.services .boxs .box{
width: 31%;
border-radius: 5px;
overflow: hidden;
background: #fff;
position: relative;
box-shadow: 5px 5px 12px #9191914b;
transition: 0.3s ease-in-out;
margin-bottom: 30px;
}
.services .boxs .box .img_absolute{
position: absolute;
bottom: 0;
left: 0;
}
.services .boxs .box
.services .boxs .box:hover{
box-shadow: 5px 5px 22px #5d5d5db8;
}
.services .boxs .box::after{
content: '';
position: absolute;
right: 0;
bottom: 0;
width: 0%;
height: 4px;
background: var(--main-color);
transition: 0.3s ease-in-out;
}
.services .boxs .box:hover::after{
width: 100%;
}
.services .boxs .box .div_img{
position: relative;
}
.services .boxs .box .div_img .icons{
position: absolute;
background: #fff;
z-index: 10;
top: calc(100% - 30px);
right: 20px;
border-radius: 50%;
overflow: hidden;
padding: 15px;
width: 60px;
height: 60px;
box-shadow: 5px 5px 8px #00000045;
transition: 0.3s ease-in-out;
}
.services .boxs .box .div_img .icons img{
width: 100%;
}
.services .boxs .box:hover .div_img .icons img{
scale: 1 !important;
}
.services .boxs .box:hover .div_img .icons{
background: var(--second-color);
}
.services .boxs .box .div_img img{
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1;
scale: 1;
transition: 0.3s ease;
}
.services .boxs .box .div_img .img_serv{
position: relative;
overflow: hidden;
width: 100%;
height: 200px;
}
.services .boxs .box:hover .div_img img{
scale: 1.1;
}
.services .boxs .box .content{
padding: 40px 15px 40px;
}
.text_bg_gr{
background: var(--second-color);
width: max-content;
position: relative;
right: -15px;
padding: 8px 15px 8px 25px;
font-size: 15px;
color: #fff;
border-top-left-radius: 30px;
border-bottom-left-radius: 30px;
margin: 10px 0 20px;
}
.services .boxs .box h2{
font-size: 24px;
margin-bottom: 20px;
}
.services .boxs .box p{
margin-bottom: 30px;
} .blog{
background: #ffffff;
}
.blog .boxs{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.blog .boxs .box{
width: 31%;
border-radius: 10px;
overflow: hidden;
background: #fff;
position: relative;
box-shadow: 5px 5px 12px #9191914b;
transition: 0.3s ease-in-out;
}
.blog .boxs .box:hover{
box-shadow: 5px 5px 22px #5d5d5db8;
}
.blog .boxs .box .div_img{
position: relative;
padding: 20px;
border-radius: 10px;
}
.blog .boxs .box .div_img img{
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1;
scale: 1;
transition: 0.3s ease;
border-radius: 10px;
}
.blog .boxs .box .div_img .img_serv{
position: relative;
overflow: hidden;
width: 100%;
height: 250px;
}
.blog .boxs .box:hover .div_img img{
scale: 1.1;
}
.blog .boxs .box .content{
padding: 0px 15px 40px;
}
.blog .boxs .box h2{
font-size: 28px;
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 20px;
}
.blog .boxs .box p{
margin-bottom: 30px;
line-height: 1.6;
}
@media(max-width:1450px){
.container{
width: 90%;
}
.hatem_sec .container .box .div_img{
padding: 30px;
}
}
@media(max-width:1000px){
.hero .container{
flex-direction: column;
justify-content: center;
gap: 50px;
}
.hero .container .div_text{
width: 100%;
}
.hero .container .div_img{
width: 80%;
}
.about .container{
flex-direction: column;
gap: 80px;
}
.about .text{
width: 100%;
padding-right: 15px;
}
.about .container .div_img{
width: 70%;
}
.about .container .div_img img{
width: 100%;
}
.about .content ul li{
font-size: 15px;
margin-bottom: 10px;
}
.about .content ul li:last-child{
margin-bottom: 40px;
}
.hatem_sec .container{
flex-wrap: wrap;
flex-direction: column;
gap: 0;
justify-content: space-between;
align-items: flex-start;
}
.hatem_sec .container .box{
flex-direction: row;
width: 100%;
}
.hatem_sec .container .box:nth-child(2),
.hatem_sec .container .box:nth-child(4){
top: 0;
}
.hatem_sec .container .box .div_img{
margin: 0;
width: 90px;
position: relative;
right: 10px;
}
.hatem_sec .container .box{
justify-content: space-between;
text-align: right;
margin-bottom: 50px;
align-items: flex-start;
}
.hatem_sec .container .box h3{
margin-bottom: 10px;
}
.hatem_sec .container .box .div_img{
padding: 22px;
}
.hatem_sec .container .box .content{
width: calc(100% - 120px);
}
.hatem_sec .container .box .div_img::before{
content: '';
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 100%;
width: 1px;
height: 100px;
border-left: 2px dashed #999;
}
.hatem_sec .container .box:last-child .div_img::before{
border: 0px;
}
.sm_sec .container .box{
width: 48%;
margin-bottom: 40px;
}
.services .boxs .box{
width: 49%;
margin-bottom: 30px;
}
.blog .boxs .box{
width: 49%;
margin-bottom: 30px;
}
}
@media(max-width:500px){
.container{
width: 95%;
}
.top_sec h3{
font-size: 30px;
}
.top_sec p{
font-size: 15px;
}
.hero{
height: auto;
}
.hero .container{
padding: 100px 0;
}
.hero .container .div_img{
width: 100%;
}
.hero .div_text{
text-align: center;
}
.hero .div_text h1{
font-size: 35px;
}
.hero .div_text .div{
flex-direction: column;
}
.hero .div_text h6{
margin-inline: auto;
}
.about{
padding-bottom: 100px;
}
.about .top_sec p{
font-size: 22px;
}
.about .container .div_img{
width: 100%;
}
.about .text .content{
display: flex;
flex-direction: column;
}
.about .container .div_img .div_cont{
width: 200px;
}
@keyframes aboutan{
0%{
top: 100%;
left: 10%;
right: auto;
}
50%{
top: 100%;
left: 30%;
right: auto;
}
100%{
top: 100%;
left: 10%;
right: auto;
}
}
.about .container .div_img .div_cont{
padding: 20px 20px;
}
.about .container .div_img .div_cont .div_Svg{
width: 60px;
height: 60px;
padding: 10px;
}
.about .container .div_img .div_cont span{
font-size: 17px;
}
.about .container .div_img .div_cont h3{
font-size: 14px;
margin-top: 10px;
}
.about .text .phone{
padding: 15px 20px 15px 20px;
}
.about .text .phone h6{
font-size: 25px;
}
.about .text .phone svg{
width: 60px;
}
.about .text .phone{
gap: 15px;
}
.hatem_sec .container .box h3{
font-size: 18px;
}
.hatem_sec .container .box p{
font-size: 15px;
}
.sm_sec .container .box{
width: 90%;
margin: auto;
margin-bottom: 40px;
}
.services .boxs {
justify-content: center;
}
.services .boxs .box{
width: 90%;
margin-bottom: 30px;
}
.services .boxs .box .div_img .img_serv{
height: 170px;
}
.services .boxs .box p{
font-size: 14px;
}
.services .boxs .box h2{
font-size: 20px;
margin-bottom: 12px;
}
.blog .boxs {
justify-content: center;
}
.blog .boxs .box{
width: 90%;
margin-bottom: 30px;
}
.blog .boxs .box .div_img .img_serv{
height: 170px;
}
.blog .boxs .box p{
font-size: 16px;
}
.blog .boxs .box h2{
font-size: 23px;
margin-bottom: 12px;
font-weight: 500;
}
} .arrowup{
position: fixed;
bottom: -100px;
left: 20px;
width: 45px;
height: 45px;
background: var(--main-color);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: 0.3s ease-in-out;
z-index: 100;
}
.arrowup.showarro{
bottom: 100px;
}
.arrowup svg{
width: 25px;
fill: #fff;
} footer{
background: #394150;
}
footer .container{
display: flex;
justify-content: space-between;
padding: 30px 0 0px;
}
footer .container .big_row{
width: 25%;
position: relative;
top: -px;
}
footer .container .big_row .hotline{
display: flex;
align-items: center;
margin: 15px 0;
gap: 10px;
}
footer .container .big_row .logo{
width: 90%;
background: #fff;
border-radius: 10px;
}
footer .container .big_row .hotline i{
font-size: 60px;
color: #27a9df;
}
footer .container .big_row .hotline h5{
color: #fff;
font-size: 18px;
margin-bottom: 10px;
}
footer .container .big_row .hotline h6{
color: #27a9df;
font-size: 18px;
}
footer .container .big_row p{
width: 90%;
color: #b1b1b1;
font-size: 14px;
line-height: 1.5;
}
footer .container .row{
width: 22%;
}
footer .container .row h4{
color: #fff;
margin-bottom: 20px;
font-size: 18px;
}
footer .container .row .links{
display: flex;
flex-direction: column;
gap: 7px;
}
footer .container .row .links a{
color: #b1b1b1;
font-size: 14px;
position: relative;
right: 0;
transition: 0.3s ease-in-out;
display: flex;
align-items: center;
}
footer .container .row .links a svg{
width: 17px;
fill: #b1b1b1;
transition: 0.3s ease-in-out;
}
footer .container .row .links a:hover{
right: 8px;
color: var(--main-color);
}
footer .container .row .links a:hover svg{
fill: var(--main-color);
}
footer .container .row .icons{
display: flex;
gap: 20px;
padding-bottom: 50px;
}
footer .container .row .icons img{
width: 40px;
cursor: pointer;
scale: 1;
transition: 0.3s ease;
}
footer .container .row .icons img:hover{
scale: 1.2;
}
footer .bottom_footer{
background: #202935;
}
footer .bottom_footer .container{
padding: 20px 0;
justify-content: center;
text-align: center;
}
footer .bottom_footer .container span{
color: #27a9df;
}
@media(max-width:1450px){
.container{
width: 95%;
}
}
@media(max-width:1000px){
footer .container{
flex-wrap: wrap;
}
footer .container .row{
width: 40%;
margin-bottom: 20px;
}
footer .container .big_row{
width: 55%;
margin-bottom: 20px;
}
}
@media(max-width:500px){
footer .container .row{
width: 100%;
}
footer .container .big_row{
width: 100%;
}
}
html{
scroll-behavior: smooth;
}
*{
padding: 0;
margin: 0;
box-sizing: border-box;
text-decoration: none;
list-style: none;
font-family: "Tajawal", sans-serif;
}
html {
box-sizing: border-box;
-ms-overflow-style: scrollbar
}
table {
border-collapse: collapse;
border-spacing: 0;
}
table {
background-color: transparent;
}
table {
border: 1px solid #ddd;
margin-bottom: 30px;
width: 100%;
}
table.container{
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto
} a {
color: #4169e1; }
table>tbody>tr>td, table>tbody>tr>th, table>tfoot>tr>td, table>tfoot>tr>th, table>thead>tr>td, table>thead>tr>th {
border: 1px solid #ddd;
padding: 7px 10px;
}
*,
::after,
::before {
box-sizing: inherit
}
body {
font-family: "Tajawal", sans-serif;
font-size: 16px;
line-height: 1.4;
color: #212121;
background-color: #ffffff;
margin: 0
}
button {
background: 0 0;
border: 0;
cursor: pointer
}
svg:not(:root) {
overflow: hidden
}
svg {
vertical-align: middle
}
img {
max-width: 100%;
height: auto; }
p {
margin: 0
}
iframe{
max-width:100%
}
::placeholder { 
color: #6e6e6e;
opacity: 1; 
font-weight: 900;
font-size: 21px;
}
:-ms-input-placeholder { 
color: #2b2b2b;
opacity: 1; 
font-weight: 900;
font-size: 21px;
}
::-ms-input-placeholder { 
color: #2b2b2b;
opacity: 1; 
font-weight: 900;
font-size: 21px;
}
.screen-reader {
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
overflow: hidden;
position: absolute!important;
width: 1px;
word-wrap: normal!important
}
.screen-reader:active,
.screen-reader:focus {
background-color: #f1f1f1;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, .6);
box-shadow: 0 0 2px 2px rgba(0, 0, 0, .6);
clip: auto!important;
color: #21759b;
display: block;
font-size: 14px;
font-size: .875rem;
font-weight: 700;
height: auto;
left: 5px;
line-height: normal;
padding: 15px 23px 14px;
text-decoration: none;
top: 5px;
width: auto;
z-index: 100000
}
.hideflow {
overflow: hidden
}
.txtcenter {
text-align: center
}
header {
display: block; }
header.sticky {
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 9999;
background-color: #fff;
}
.topbar-section {
padding: 15px;
background: transparent linear-gradient(272deg, #6a4797 0, #563a7a 100%);
background: transparent linear-gradient(272deg, #6a4797 0, #563a7a 100%)
}
.site-branding {
text-align: center
}
.topbar {
background: #051d56;
color: #fff;
}
.topbar-innr {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.topbar-innr ul {
list-style: none;
margin: 0;
padding: 0;
width: 69%;
font-size: 14px;
}
.topbar-innr ul li{display: inline-block;margin-right: 15px;}
.topbar-innr ul li span{
color: #d6d6d6;
margin-left: 8px;
font-size: 15px;
}
.topbar-innr .left {
width: 66%;
display: flex;
flex-wrap: wrap;
align-items: center;
}
.topbar-innr .right {
width: 34%;
}
.call-us-wrap {
width: 20%;
}
a.call-us { background-color:#051d56 ;
text-decoration: none;
padding: 6px 18px;
display: inline-block;
border-radius: 15px;
color: #fff;
}
.site-title-inner {
margin-right: 10px;
line-height: 1.3
}
.site-title {
font-size: 20px;
font-weight: 900;
text-decoration: none
}
.site-description {
font-size: 14px;
padding-top: 5px;
}
.topbar-inner {
width: 100%
}
.search-wrap { }
.search-wrap.open {
display: block;
}
.search-form {
position: relative;
width: 100%;
}
.search-field {
width: 100%;
padding: 7px 17px 00 3px;
line-height: 1;
box-sizing: border-box;
outline: 0;
height: 50px;
border: 1px solid #026873;
background: #e8ebf2;
border-radius: 15px;
color: #000000;
overflow: hidden;
}
.search-submit {
position: absolute;
left: 00;
top: 0px;
bottom: 0;
border: 0;
background: 0 0;
outline: 0;
margin: 0;
padding: 0 14px;
z-index: 2;
color: #fff;
background: #051d56;
background: linear-gradient(90deg, #051d56 0%, #051d56 100%);
border-radius: 15px 0 0 15px;
font-size: 21px;
font-weight: 900;
}
.menubar-section {
background: #f7f7f7;
}
.sidebar-close
{
border-radius: 10px;
background: 0 0;
border: 1px solid rgb(0 0 0 / 10%);
padding: 8px 10px
}
.main-navigation ul {
list-style: none;
margin: 0
}
.menubar-inner {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center
}
.menu-items li {
position: relative
}
.menu-items li a {
color: #102259;
display: block;
padding: 10px;
text-decoration: none;
font-weight: 900;
font-size: 19px;
margin: 2px 0;
}
button.search-toggle {
padding: 21px 18px;
background: rgba(0,0,0,.1);
}
.icon-dropdown {
border: solid #3c474f;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transition-duration: .8s;
transition: transform .3s, -webkit-transform .3s
}
.submenu-toggle {
display: block;
left: 0;
padding: 18px 16px;
position: absolute;
top: 0;
background: #ffffff;
}
.sub-menu {
display: none
}
.sub-menu.active {
display: block
}
.waves {
position: relative;
width: 100%;
height: 15vh;
margin-bottom: -7px; min-height: 100px;
max-height: 150px;
}
.submenu-toggle.active .icon-dropdown {
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg)
}
.book-now a {
text-decoration: none;
font-weight: 800;
font-size: 18px;
color: #3f51b5;
margin-left: 8px
}
.book-now a span {
margin-right: 10px
}
.bar-align {
display: flex;
position: relative;
align-items: center;
flex-wrap: wrap;
padding: 0px 0;
}
.wave {
width: 120%;
height: 50px;
background: #eff5fe;
margin-left: -10%;
}
.topbar .follow-us {
display: inline-block;
width: 30%;
}
.contact-menu {
display: flex;
flex-wrap: wrap;
list-style: none;
margin: 0;
padding: 0;
border-bottom: 1px solid #3d275a;
padding: 15px 0;
border-top: 1px solid #3d275a;
margin-bottom: 25px
}
.contact-menu a {
color: #fff;
text-decoration: none
}
.contact-menu li {
width: 50%;
position: relative;
margin-bottom: 18px;
text-align: right
}
.contact-menu li::before {
content: " ";
display: inline-block;
border: 6px solid transparent;
border-right-color: #ebd67a;
width: 0;
height: 0;
margin-left: 15px
}
.copyright {
padding: 15px 0;
font-weight: 700
}
.topbar .follow-us a {
margin: 5px;
display: inline-block;
}
.contact-info {
}
.contact-section {
text-align: center;
width: 100%;
margin-bottom: 15px
}
.contact-txt span {
display: block;
}
.contact-txt .bold {
color: #ffd31e;
font-weight: 700;
font-size: 23px;
}
.contact-icon {
margin-bottom: 10px;
background: #ffffff;
padding: 9px;
border-radius: 50px;
border: 6px solid #c6ddff;
box-shadow: 0 5px 15px 0 rgb(0 0 0 / 8%);
}
.scrollUp {
display: none;
position: fixed;
left: 7px;
bottom: 8px;
background: #006bb7;
padding: 8px 5px;
border-radius: 12%;
z-index: 5447778;
justify-content: center;
align-items: center;
border: 1px solid #000000;
transition: 0.3s ease; }
.scrollUp:hover{
background: transparent;
}
.scrollUp svg{
fill: #fff;
}
.scrollUp:hover svg{
fill:#006bb7;
;
}
.scrollUp.active {
display: flex
}
.call-with-phone,
.whatsapp-chat {
position: fixed;
bottom: 69px;
bottom: 0px;
text-decoration: none;
animation: animate-waggle 5s infinite;
z-index: 9999;
right: 15px;
}
.call-with-phone {
bottom: 78px;
}
.call-phone-icon,
.whatsapp-chat-icon {
background: #4caf50;
display: inline-block;
padding: 0;
margin: 0;
border-radius: 50%;
padding: 11px;
box-shadow: 8px 8px 30px 0 rgb(64 82 185 / 30%)
}
.not-found {
padding: 80px 0;
text-align: center
}
.not-found h1 span {
display: block
}
.not-found .number {
color: #006bb7;
position: relative;
font: 839 133px Consolas;
letter-spacing: 5vmin;
display: block;
}
.title-line-right,
.title-line {
position: relative;
padding-bottom: 13px;
display: inline-block;
}
.title-line::after {
content: '';
height: 4px;
width: 44%;
position: absolute;
bottom: 0;
margin: 0 auto;
left: 0;
right: 0;
background: #f0a589;
background: linear-gradient(90deg, #051d56 0%, #051d56 100%);
}
.title-line-right::after{
content: '';
height: 4px;
width: 28%;
position: absolute;
bottom: 0;
right: 0;
background: #f0a589;
background: linear-gradient(90deg, #051d56 0%, #051d56 100%);
}
@-webkit-keyframes moving {
to {
background-position: 100vmin 20vmin, -100vmin -25vmin
}
}
@keyframes moving {
to {
background-position: 100vmin 20vmin, -100vmin -25vmin
}
}
@keyframes animate-waggle {
0% {
transform: none
}
10% {
transform: rotateZ(-20deg) scale(1.2)
}
13% {
transform: rotateZ(25deg) scale(1.2)
}
15% {
transform: rotateZ(-15deg) scale(1.2)
}
17% {
transform: rotateZ(15deg) scale(1.2)
}
20% {
transform: rotateZ(-12deg) scale(1.2)
}
22% {
transform: rotateZ(0) scale(1.2)
}
100%,
24% {
transform: rotateZ(0) scale(1)
}
}
.call-us a {
background: #006bb7;
color: #fff;
text-decoration: none;
padding: 6px 15px;
display: inline-block;
}
@media only screen and (max-width: 590px){
.background {
margin-inline-end: 0px;
width: 45px;
height: 45px;
}}
@media only screen and (max-width: 992px){
.background {
border-radius: 16px;
background: #f4f4f4;
backdrop-filter: blur(15px);
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
margin-inline-end: 18px;
}}
@media (max-width: 992px) {
.bar-align{
justify-content: space-between; }
.waves {
height: 40px;
min-height: 40px;
}
.main-nav {
background: #ffffff;
position: fixed;
height: 100%;
top: 0;
right: 0;
overflow-x: hidden;
padding-top: 60px;
width: 0;
transition: .5s;
visibility: hidden;
opacity: 0;
z-index: 999; }
.menu-items {
padding: 0;
margin: 0;
padding: 60px 0 21px 0;
}
.menu-items li{
border-top: 1px solid #051d5623;
}
.sidebar-close {
background: #ffffff;
position: absolute;
top: 9px;
left: 15px;
padding: 4px 7px;
z-index: 9999
}
.main-nav.active {
width: 100%;
visibility: visible;
opacity: 1;
padding: 25px;
}
.sidebar-open { width: 32px;
height: 32px;
padding: 4px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
.sidebar-open span {
width: 100%;
height: 2px;
border-radius: 0.125rem;
background-color: #000000;
transition: transform .4s, background-color .4s, opacity .4s;
}
.topbar,
.call-us-wrap{
display: none
}
}
@media (min-width: 992px) {
.main-nav {
width: 65%;
}
.sidebar-close,
.sidebar-open,
.submenu-toggle {
display: none
}
.menu-items>li {
display: inline-block
}
.menu-items li.current > a{ color: #051d56;
}
.menu-items li a {
box-shadow: none;
padding: 5px 17px;
}
.menu-items li a:hover {
color: #1f5fff;
}
.menu-items li.has-children>a:after {
content: " ";
border: solid #000000;
border-width: 0 2px 2px 0;
display: inline-block;
padding: 2.5px;
transform: rotate(45deg);
position: relative;
top: -1px;
right: 7px
}
.menu-items .sub-menu li.has-children>a:after {
border: solid #707070;
border-width: 0 2px 2px 0;
}
.menu-items .sub-menu .has-children>a:after {
position: absolute;
top: 43%;
left: 1em;
right: auto;
transform: rotate(137deg)
}
.menu-items .sub-menu {
background-color: #fff;
position: absolute;
top: 100%;
right: 0;
min-width: 180px;
padding: 0;
z-index: 9999;
box-shadow: 0 0 20px 0 rgb(0 0 0 / 40%);
border-radius: 0 0 10px 10px;
}
.menu-items .sub-menu a {
color: #000;
margin: 0;
padding: 10px 16px;
border-bottom: 1px solid #e5e5e5;
font-size: 15px;
}
.menu-items .sub-menu a:hover{
color: #fff;
background-color: #1f5fff;
}
.menu-items .sub-menu .has-children .sub-menu {
right: 100%;
top: 0
}
.menu-items .has-children:hover>.sub-menu {
display: block
}
.topbar-inner {
display: flex;
align-items: center;
flex-wrap: wrap
}
.site-branding {
margin-left: 35px;
width: 11%;
}
.col-md-6 {
width: 100%;
margin: 31px 0;
}
.contact-menu li {
width: 33.3333%
}
.contact-section {
width: 33.3333%;
display: flex;
text-align: right
}
.contact-icon {
margin-left: 17px
}
.site-title-inner {
text-align: right
}
}
[class^="icon-"]:before,
[class*=" icon-"]:before {
font-family: "icons" !important;
font-style: normal !important;
font-weight: normal !important;
font-variant: normal !important;
text-transform: none !important;
speak: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
vertical-align: middle;
}
.icon-minus-round:before {
content: "\66";
}
.icon-question-circle:before {
content: "\61";
}
.icon-plus:before {
content: "\62";
}
.icon-phone:before {
content: "\63";
}
.icon-envelope:before {
content: "\64";
}
.icon-map-marker:before {
content: "\65";
}
.icon-whatsapp:before {
content: "\67";
}
.icon-linkedin-square:before {
content: "\68";
}
.icon-facebook-alt:before {
content: "\6a";
}
.icon-social-whatsapp:before {
content: "\69";
}
.icon-social-instagram:before {
content: "\6b";
}
.icon-twitter:before {
content: "\6c";
}
.icon-angle-double-left:before {
content: "\6d";
}
section.question { }
.question-innr {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
}
.question-content {
width: 100%;
}
.question-img {
width: 100%;
}
.qustion-box {
box-shadow: 0 0 25px 0 rgb(0 0 0 / 10%);
border-radius: 15px;
margin: 27px 0;
padding: 20px 15px;
color: #1b4a58;
}
.qustion-box p.answer {
display: none;
}
.qustion-box.active .answer {
display: block;
padding: 17px;
margin-top: 24px;
}
h2.question-title {
position: relative;
color: #1b4a58;
display: block;
width: 100%;
text-align: right;
font-size: 18px;
font-weight: 900;
}
span.icon.icon-plus {
position: absolute;
left: 0;
}
.qustion-box.active .question-title {
color: #e66949;
}
.qustion-box.active .question-title .icon-plus:before {
content: "\66";
}
.question-other {
margin: 10px 0;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-evenly;
background: #e8ebf2;
color: #154d5b;
padding: 80px 43px;
border-radius: 27px;
}
.question-other a {
background: linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%);
text-decoration: none;
padding: 6px 18px;
display: inline-block;
border-radius: 15px;
color: #000000;
}
.clients-first-innr {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
section.clients-first {
padding: 80px 0;
}
section.clients-second {
padding: 80px 0;
}
.clients-box-innr {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.clients-box {
width: 35%;
margin: 20px;
}
@media (min-width: 992px) {
.question-content {
width: 100%;
}
.question-img {
width: 30%;
}
h2.question-title {
font-size: 24px;
}
.clients-content {
width: 56%;
}
.clients-img {
width: 31%;
}
.clients-box {
width: 13%;
}
}
section.business-first { text-align: center;
} @media (min-width: 992px) {
.business-content {
width: 100%;
}
.business-img {
width: 100%;
}
} .phone {
margin: 0 8px;
}
.phone a {
display: block;
font-weight: 700;
font-size: 18px;
padding: 7px 10px;
text-decoration: none;
color: #006bb7;
}
.phone span svg {
transform: rotate(261deg);
vertical-align: middle
}
.social-follow a {
margin: 0 1px;
width: 40px;
height: 40px;
text-align: center;
display: inline-block;
border-radius: 6px;
line-height: 35px
} @media only screen and (max-width: 600px) {
.social-follow a {
width: 30px;
height: 30px;
line-height: 25px;
text-align: center;
}
.social-follow a svg {
width: 20px;
height: 20px
}
}
.ms-whats-txt,
.ms-call-button .ms-call-txt {
-webkit-box-shadow: 0 8px 16px 0 rgba(0, 0, 0, .2), 0 6px 20px 0 rgba(0, 0, 0, .19);
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, .2), 0 6px 20px 0 rgba(0, 0, 0, .19)
}  .p-block {
display: flex;
flex-wrap: wrap;
margin: -20px -20px 20px;
justify-content: center;
overflow: hidden;
}
.p-block-box-v3 {
margin: 20px;
overflow: hidden;
min-width: 340px;
flex: 1 1 0%;
max-width: 480px;
background: #fff;
box-shadow: #dae7f3 0 6px 7px;
position: relative;
transition: all .1s ease 0s;
justify-content: center;
border-radius: 8px;
visibility: visible; }
.p-block-box-v3::before {
content: "";
position: absolute;
top: 0;
left: -83%;
z-index: 2;
display: block;
width: 50%;
height: 100%;
background: #fff;
transform: skewX(-25deg);
transition: all .2s cubic-bezier(.19,1,.22,1) 0s;
opacity: 0;
pointer-events: none;
}
a {
text-decoration: none;
transition: color 50ms ease 0s;
color: #1a205b;
}
.img-project-v3 {
height: 100%;
position: relative;
}
.img-project-v3 img {
height: 215px;
width: 100%;
object-fit: cover;
}
.p-block-box-v3:hover .overlay-box {
opacity: 1;
transform: translate3d(0px, 0px, 0px);
}
.overlay-box {
position: absolute;
bottom: 0px;
text-align: center;
left: 0px;
width: 100%;
height: 100%;
background: linear-gradient(rgba(51, 51, 51, 0) 0px, rgba(5, 4, 116, 0.51) 75%);
content: "";
transform: translate3d(0px, 1%, 0px);
transition: opacity 0.35s ease 0s, transform 0.35s ease 0s;
opacity: 0;
}
.overlay-inner {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
display: table;
vertical-align: middle;
padding: 10px 0px;
}
.content {
position: relative;
display: table-cell;
vertical-align: middle;
}
.content {
padding: 16px;
}
.title_content_blog {
padding: 25px 23px 20px;
display: flex;
flex-direction: column;
text-align: right;
justify-content: center;
position: relative;
}
.contesaet_shap1 {
text-align: right;
display: flex;
flex-direction: column;
flex: 1 1 0%;
border-bottom: 1px solid #eaeaea;
padding-bottom: 10px;
}
.contesaet_shap1 h3 {
margin-bottom: 8px;
font-size: 20px;
position: relative;
color: #1f2453;
display: flex;
align-items: center;
border-bottom: 1px solid #eaeaea;
padding-bottom: 11px;
}
.contesaet_shap1 h3::before {
content: "";
width: 36px;
height: 2px;
bottom: -2px;
right: 0;
background-color: rgba(225,169,220,.13);
position: absolute;
transition: all .4s ease 0s;
}
.contesaet_shap1 h3 i {
font-size: 29px;
margin-left: 11px;
color: #5d2b74;
background: #eaf7ff;
border-radius: 8px;
font-weight: 400;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
transition: all .1s ease 0s;
}
.contesaet_shap1 span .svg1 {
font-size: 29px;
margin-left: 11px;
color: #5d2b74;
background: #eaf7ff;
border-radius: 8px;
font-weight: 400;
width: 31px;
height: 27px;
display: flex;
align-items: center;
justify-content: center;
transition: all .1s ease 0s;
}
.fa-angle-left:before {
content: "\f104";
}
.contesaet_shap1 p {
font-size: 16px;
margin-bottom: 5px;
color: #000;
}
.linkes_blog2 {
display: flex;
text-align: center;
align-items: center;
flex: 1 1 0%;
}
.linkes_blog2 a {
font-size: 16px;
font-weight: 700;
color: #ffffff;
display: flex;
text-align: center;
justify-content: center;
background: rgb(27 110 221 / 59%);
transition: all .2s ease 0s;
padding: 8px 22px;
border-radius: 8px;
align-items: center;
margin-right: auto;
}
.linkes_blog2 a span {
display: flex;
align-items: center;
text-align: center;
justify-content: center;
}
.linkes_blog2 i {
transition: all .2s ease 0s;
margin-right: 11px;
}
.fa-chevron-double-left:before, .fa-chevrons-left:before {
content: "\f323";
}
.p-block-box-v3:hover {
background: #fdfafa;
}
.p-block-box-v3:hover {
transform: scale(1.01) translate(0,-8px);
box-shadow: 0 27px 52px #0003;
}
.p-block-box-v3:hover::before {
left: 150%;
transition: all 1.5s cubic-bezier(.19,1,.22,1) 0s;
opacity: .2;
}
.p-block-box-v3:hover .contesaet_shap1 h3 {
color: rgb(35 165 184);
}
.p-block-box-v3:hover .contesaet_shap1 h3::before {
left: 430px;
width: 100%;
}
.p-block-box-v3:hover .contesaet_shap1 h3 i {
background: #eaf7ff;
color: #0e59a5;
}
.p-block-box-v3:hover .contesaet_shap1 h3 i {
background: #eaf7ff;
color: #0e59a5;
}
.p-block-box-v3:hover .linkes_blog2 a {
background: #26abbe;
color: #fff;
}
.p-block-box-v3:hover .linkes_blog2 i {
transform: scale(1);
margin-right: 8px;
opacity: 1;
visibility: visible;
}
.foot-project {
display: flex;
text-align: right;
width: 100%;
align-items: center;
margin-top: 8px;
position: relative;
}
.foot-project>div {
flex: 1 1 0%;
}
.admin_icon {
display: flex;
align-items: center;
}
.foot-project>div {
flex: 1 1 0%;
}
.rating {
align-self: center;
}
.rating {
flex: 1 1 0%;
justify-content: left;
text-align: left;
}
.caption a {
position: absolute;
left: 0%;
top: 0px;
background: #e3edfb;
color: #000;
font-weight: bold;
z-index: 999;
padding: 10px;
border-radius: 0 10px 10px 00;
font-size: 12px;
}
.titlesconcept span {
font-size: 36px;
line-height: 50px;
padding-bottom: 5px;
font-weight: 700;
margin-bottom: 2px;
color: #3c3c3c;
border-bottom: 2px solid #00000024;
}
.titles_concept {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
margin-bottom: 30px;
z-index: 1;
}
@media only screen and (max-width: 580px) {
.owl-item {
padding: 10px 10px;
}
}
.all-info {
overflow: hidden;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
@media only screen and (max-width: 993px){
.all-info {
flex-direction: column;
}}
@media only screen and (min-width: 768px) {
.banner .content {
display: flex;
justify-content: center;
align-items: center;
padding-top: 120px;
}
h1 {
font-size: 35px;
}
.our-featurs .txt-justify {
padding-left: 40px;
}
.sec-pad-80 {
padding: 80px 0
}
.banner {
padding: 0;
}
.hide-xs {
display: block;
}
.col {
float: right;
}
.col-2 {
width: 16.666667%
}
.col-5 {
width: 50%;
}
.col-6 {
width: 44%;
}
.col-7 {
width: 56%;
}
.featurs-card {
margin: 15px;
}
.card-archive {
width: 22%;
}
.card-archive:nth-child(2n+1) {
clear: none;
}
.card-sm{
width: 14%;
}
}
.fixed_btn{
position: fixed;
bottom: 15px;
left: 0;
right: 0;
display: flex;
justify-content: space-between;
padding: 0 40px;
z-index: 999999999999999999;
}
.fixed_btn .box-hatem{
background: #fff;
border: 1px solid var(--border-color);
display: flex;
justify-content: right;
align-items: center;
gap: 8px ;
border-radius: 10px;
padding: 10px 10px 10px 35px;
box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .1);
z-index: 9999999999999px;
}
.fixed_btn .box-hatem .img{
width: 40px;
height: 40px;
border-radius: 50%;
padding: 9px;
background: var(--main-color);
}
.fixed_btn .box-hatem .img img{
width: 100%;
}
.fixed_btn .box-hatem  h6{
font-size: 18px;
margin: 0;
}
@media (max-width:500px) {
.fixed_btn{
padding: 0 20px;
}
.fixed_btn .box-hatem{
padding: 8px 12px;
}
.fixed_btn a{
width: 45%;
}
}.blog .boxs{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
align-items: center;
}
.blog .boxs .box{
width: 31%;
border-radius: 5px;
overflow: hidden;
box-shadow: 3px 5px 8px #006bb765;
border: 1px solid #006bb734;
position: relative;
transition: 0.4s !important;
margin-bottom: 22px;
}
.blog .boxs .box:hover{ box-shadow: -5px 12px 30px #8f8f8f6b;
}
.blog .boxs .box .div-img img{
width: 100%;
height: 250px; }
.blog .boxs .box .content{
padding: 25px;
}
.blog .boxs .box .content div{
display: flex;
gap: 10px;
align-items: center;
padding: 15px 0;
border-bottom: 2px solid #00000010;
}
.blog .boxs .box .content div h2{
font-size: 20px;
}
.blog .boxs .box .content div span{
width: 50px;
height: 50px;
border-radius: 5px;
background: #fbf4fc;
border: 1px solid #006bb72a;
text-align: center;
line-height: 50px;
}
.blog .boxs .box .content p{
padding-top: 15px;
font-size: 14px;
line-height: 1.7;
margin-bottom: 20px;
}
.blog .boxs .box .content .btns{
display: flex;
justify-content: left;
padding:0 0 15px 0;
}
.blog .boxs .box .content .btns svg{
width: 25px;
}
.blog .boxs .box .content .btns .btn{
font-size: 15px;
}
.blog .boxs .box .content .stars{
border: 0;
gap: 0px;
display: flex;
justify-content: center;
padding: 0;
}
.blog .boxs .box .content .stars svg{
width: 30px;
height: 30px;
} .blog-box-small {
display: flex;
flex-direction: column;
}
.blog-innr-small {
width: 100%;
display: flex;
margin-bottom: 35px;
align-items: flex-start;
text-align: right;
}
.blog-innr-small img {
width: 90px;
border-radius: 17px;
}
a.blog-title-small {
display: inline-block;
width: 60%;
text-decoration: none;
margin-right: 17px;
font-size: 17px;
font-weight: 600;
color: #000000;
}
@media (max-width: 1000px) {
.blog .boxs .box{
width: 48%;
margin-bottom: 25px;
}
}
@media (max-width: 500px) {
.blog .boxs{
justify-content: center;
}
.blog .boxs .box{
width: 100%;
margin-bottom: 25px;
}
}
@media (max-width: 400px) {
.box-project{
flex-basis: 95%;
margin: 20px auto;
}
.blog .boxs{
justify-content: center;
}
.blog .boxs .box{
width: 95%;
margin-bottom: 25px;
}
}.top-section1{
background-color: transparent;
background-image: linear-gradient(180deg, #000000 0%, #1f5fff 100%);
--widgets-spacing: 20px 20px;
height: 450px;
position: relative;
}
.bottomdev1{
transform: rotate(180deg);
bottom: -1px;
overflow: hidden;
position: absolute;
left: 0;
width: 100%;
line-height: 0;
direction: ltr;
}
.bottomdev1 svg{
width: calc(100% + 1.3px);
width: calc(236% + 1.3px);
height: 215px;
z-index: -1;
display: block;
fill: white;
position: relative;
left: 50%;
transform: translateX(-50%);
}
.top-section1 .container{ display: flex;
justify-content: center;
align-items: center;
padding: 50px;
gap: 100px;
}
.top-section1 h2{
color: #fff;
font-size: 40px;
}
.top-section1 .container img{
width: 350px;
} .page-hero {
padding: 40px 0px;
position: relative;
background: #1f5fff
;
margin-bottom: 60px;
}
h1.page-title {
color: #fff;
}
.page-hero .container {
position: relative;
}
.shape-bottom {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
overflow: hidden;
line-height: 0;
}
.post-content img {
border-radius: 15px;
}
.content-area,
.widget-area {
width: 100%;
}
.shape-bottom svg {
position: relative;
display: block;
width: calc(116% + 1.3px);
height: 22px;
fill: #fff;
}
.site-content {
display: flex;
flex-wrap: wrap;
padding: 80px 0;
justify-content: space-between;
overflow: hidden
}
.side-widget {
text-align: center;
background: #1f5fff2c;
padding: 22px 15px;
border-radius: 15px;
}
.entry-meta {
padding: 23px 22px;
color: #1f5fff;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 900;
line-height: 1.4;
clear: both;
margin: 0 0 20px 0
}
h1 {
font-size: 19px;
}
.posted-by a {
text-decoration: none;
color: #940015;
}
.alignleft {
display: inline;
float: left;
margin-right: 35px
}
.alignright {
display: inline;
float: right;
margin-left: 35px;
clear: right
}
.aligncenter {
clear: both;
text-align: center;
display: block;
margin-right: auto;
margin-left: auto
}
.breadcrumbs ol li {
display: inline-block
}
.breadcrumbs li a,
.services-share a {
text-decoration: none
}
.breadcrumbs {
margin-bottom: 30px;
}
.breadcrumbs li a,
.breadcrumbs li span {
color: #ffffff;
font-weight: 600;
}
.breadcrumbs li::after {
content: "\00bb";
color: #e07f24;
padding: 0 .3em
}
.content-thumbnail img {
border-radius: 15px;
position: relative;
border-radius: 12px;
margin-bottom: 60px;
border: 8px solid #fff;
box-shadow: 0 10px 20px 5px rgb(0 0 0/20%);
}
.side-innr {
padding: 15px;
margin-bottom: 30px;
text-align: center;
}
.side-widget h3 {
display: inline-block;
font-size: 22px;
color: #1f5fff
}
.breadcrumbs li:last-of-type::after {
display: none
}
.another-blogs h3 {
margin-bottom: 80px
}
.services-content {
background-color: #fff;
position: relative;
padding: 15px;
border-top: 1px solid #1f5fff;
}
.content-innr {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-top: 80px;
}
aside {
position: relative;
}
.services-page {
width: 72%;
}
.posted-on {
display: inline-block;
font-size: 19px;
}
span.category {
margin-bottom: 0;
margin-right: 15px;
display: inline-block;
font-size: 15px;
height: 35px;
color: #fff;
background: #1f5fff;
padding: 0 15px;
line-height: 35px;
border-radius: 10px 10px 0 0;
}
.wp-caption {
background: #f1f1f3;
text-align: center;
max-width: 96%;
padding: 5px 3px 10px;
color: #000;
margin-bottom: 25px;
overflow: hidden;
}
.wp-caption img {
border: 0;
height: auto;
max-width: 98.5%;
width: auto;
}
.wp-caption p.wp-caption-text {
line-height: 17px;
margin: 0;
padding: 0 4px 15px;
font-weight: bolder
}
.entry-content p {
color: #3a4750;
margin-bottom: 34px;
font-size: 18px;
}
table {
background-color: transparent;
border: 1px solid #ddd;
border-collapse: collapse;
border-spacing: 0;
margin-bottom: 30px;
width: 100%;
}
table>tbody>tr>td,
table>tbody>tr>th,
table>tfoot>tr>td,
table>tfoot>tr>th,
table>thead>tr>td,
table>thead>tr>th {
border: 1px solid #ddd;
padding: 7px 10px;
}
table>thead>tr>td,
table>thead>tr>th {
border-bottom-width: 2px;
}
.wp-video,
.wp-video video {
height: 100%!important;
max-width: 100%!important
}
embed,
iframe,
object,
video {
max-width: 100%;
}
.services-content img,
.services-content ol,
.services-content p,
.services-content ul {
margin-bottom: 25px
}
.services-share {
display: flex;
flex-wrap: wrap;
align-items: center;
border-top: 1px solid #e7e7e7;
padding: 15px 0;
justify-content: center
}
.services-share a {
background: #8e001a;
color: #fff;
padding: 4px 11px;
margin: 8px;
font-weight: 900;
border-radius: 5px;
display: flex;
justify-content: center;
align-items: center;
border: 0
}
.services-share a svg {
margin-right: 10px
}
section>h3 {
padding: 8px 13px 8px 30px;
color: #fff;
display: inline-block;
box-shadow: -12px 8px 0 #ebd67a;
background: transparent linear-gradient(272deg, #1f5fff 0, #1f5fff 100%);
}
.content-thumbnail {
margin-bottom: 35px;
width: 100%;
}
.post-share-text {
background: #3a974c;
color: #fff;
padding: 11px 23px;
border-radius: 15px;
font-size: 18px;
}
.services-content ol,
.services-content ul {
padding-right: 15px;
margin-right: 20px
}
.services-content ul li {
position: relative;
display: block;
padding: 3px 28px;
margin-right: 0
}
.services-content ul li:before {
content: " \2714";
position: absolute;
right: 8px;
top: 5px;
color: #d5a247;
font-weight: 700
}
.services-content h2,
.services-content h3,
.services-content h4,
.services-content h5,
.services-content h6 {
border-bottom: 1px solid #dee6ec;
margin: 40px 0 25px 0;
color: #1f5fff;
padding: 8px 15px 7px 0;
border-right: 3px solid #1f5fff;
border-radius: 10px 0 10px 0;
}
.blog-topics {
padding: 80px 0
}
.blog-cards {
display: flex;
flex-wrap: wrap;
justify-content: space-between
}
.single-box .blog-box {
width: 100%;
margin: 0 0 40px 0;
}
.footer-tags {
margin: 30px 0;
}
.card-image {
width: 60px;
height: 60px;
}
.card-image img {
border-radius: 6px;
}
.blog-topics h2 {
margin-bottom: 80px
}
.card-content {
margin-right: 19px;
width: 69%;
}
.card-date {
font-size: 12px;
font-weight: 900;
color: #1f5fff
}
.card-title {
color: #000;
font-size: 15px;
padding: 5px 0;
text-decoration: none
}
.card-excerpt {
font-size: 15px
}
.sub-title {
font-weight: 900;
font-size: 20px
}
.breadcrumbs ol {
list-style: none;
padding: 0;
margin: 11px 0;
}
.post-share {
color: #1f5fff;
margin: 0 0 80px 0;
padding: 47px 48px;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
font-size: 23px;
font-weight: 800;
background: #1f5fff21;
border-radius: 12px;
}
.post-share-btns a {
color: #e9703f;
display: inline-block;
font-size: 35px;
border: 0;
margin: 0 4px;
}
.post-share-btns .icon {
font-size: 40px;
border: 0;
display: inline-block;
background: -webkit-linear-gradient(#eb6440, #ffb344);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.comment-list .comment:before,
.comment-list .comment:after {
content: "";
display: table;
table-layout: fixed;
}
.comment-list .comment:after {
clear: both;
}
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
padding: 8px 13px 8px 30px;
color: #000;
margin-bottom: 30px;
background: #0f16291c linear-gradient(272deg, #1f5fff59 0, #e9dfd17a 100%);
border-right: 4px solid #1f5fff;
}
::marker {
font-size: 18px;
}
.comment-avatar {
float: right;
margin-left: 0.75em;
}
.comment-avatar img {
border-radius: 50px;
}
.comment-block {
line-height: 1.5;
float: right;
padding: 10px;
background: #ffffff;
color: #3d596e;
border-radius: 10px;
margin-bottom: 15px;
position: relative;
}
.comment-block:before {
content: "\27A6";
}
.comment-date {
font-size: 12px;
}
.comment-excerpt {
font-size: 14px;
margin-top: 5px;
}
.post-author-avatar .avatar {
box-shadow: 0 1px 3px 1px #868686;
border: 2px solid #fff;
}
.side-left,
.comment-list>.comment {
overflow: hidden;
padding: 15px 17px;
}
.comment-list .comment:last-child {
border-bottom: 0;
}
.faq-panel {
background: #f1f1f3;
padding: 16px 19px !important;
}
.faqs h2 {
text-align: center;
}
.faqs {
margin-bottom: 50px;
}
.faq-panel h3 {
color: #1f5fff;
background: #fff;
padding: 13px 18px;
border: 1px solid #1f5fff;
border-radius: 10px;
}
.faq-panel p {
padding: 9px 15px;
}
.comments-box ol {
list-style: none;
padding: 0;
margin-top: 0;
}
.comments-box .children ol,
.comments-box .children {
margin-right: 20px;
}
.comment-block {
width: 92%;
}
label {
font-weight: 800;
margin-bottom: 15px;
display: block;
}
.footer-tags a {
display: inline-block;
margin: 6px 3px;
background: #edf4ff;
text-decoration: none;
padding: 3px 16px;
border-radius: 10px;
font-size: 14px;
font-weight: 900;
color: #1f5fff;
}
.required {
color: #f44336
}
input[type="text"],
input[type="email"],
input[type="url"],
textarea,
input[type="tel"] {
font-size: 20px;
background: #ffffff;
border: 0;
border-radius: 0px;
display: block;
padding: 12px 30px;
margin-bottom: 20px;
width: 100%;
}
select {
font-size: 15px;
min-height: 30px;
max-width: 25rem;
-webkit-appearance: none;
background: #fbfbfb url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23555%22%2F%3E%3C%2Fsvg%3E) no-repeat left 13px top 55%;
background-size: 16px 16px;
cursor: pointer;
vertical-align: middle;
width: 100%;
border: 1px solid #c8d7e1;
padding: 8px 15px;
}
textarea {
max-height: 160px;
}
.comment-respond {
padding: 23px 38px;
border-radius: 15px;
}
.social-share-innr a {
display: inline-block;
margin: 5px;
}
.comments-area {
background-color: #1f5fff23;
padding: 20px 25px;
border-radius: 12px;
}
.submit {
border-radius: 3px;
box-shadow: none;
color: #fff;
cursor: pointer;
display: inline-block;
font-size: 17px;
font-weight: 700;
padding: 7px 15px;
border: 0;
background: #1f5fff;
}
@media (min-width: 992px) {
.content-area {
width: 70%;
}
.widget-area {
width: 27%;
}
span.posted-on {
margin: 0 25px;
}
.page-hero { }
h1 {
font-size: 29px;
}
.shape-bottom svg {
height: 90px;
}
} @media (max-width:1000px) {
.top-section1{
height: auto;
padding-bottom: 100px;
overflow: hidden;
}
.top-section1 .container{
padding: 40px;
gap: 80px;
}
.top-section1 h2{
font-size: 30px;
}
.top-section1 .container img{
width: 250px;
}
}
@media (max-width:500px) {
.top-section1 .container{
flex-direction: column;
}
.top-section1 .container img{
width: 200px;
}
}.page-header {
background: transparent linear-gradient(272deg, #6a4797 0, #563a7a 100%);
color: #fff;
padding: 40px 0 15px;
text-align: center;
margin-bottom: 50px
}
.p-50 {
padding: 50px 0
}
.pagination .page-numbers {
display: inline-block;
width: 40px;
height: 40px;
line-height: 40px;
font-weight: 500;
margin: 0 3px;
background: #fff;
border: 1px solid #c8d7e1;
color: #000;
text-decoration: none;
border-radius: 6px;
margin: 16px 2px;
}
.pagination .next,
.pagination .prev {
float: left;
text-align: left;
padding: 0 1.5em;
width: auto;
height: auto;
line-height: revert
}
.blog-innr {
padding: 50px 0;
}
.pagination .prev {
float: right;
text-align: right
}
.pagination .current,
.pagination .page-numbers:hover {
color: #fff;
background: #006bb7;
}
.blog-page-innr .all-category {
margin-top: 57px;
}
.blog-header h2 {
color: #006bb7;
}
.gallery-image {
padding: 20px;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.gallery-image img {
height: 250px;
width: 350px;
transform: scale(1.0);
transition: transform 0.4s ease;
border-radius: 15px;
}
.gallery-img-box {
box-sizing: content-box;
margin: 10px;
height: 250px;
width: 350px;
overflow: hidden;
display: inline-block;
color: white;
position: relative;
background-color: white;
}
.all-category-innr {
text-align: center;
margin: 74px 0 0 0;
}
.category-list ul {
list-style: square;
padding: 0;
margin: 0;
}
.category-list ul li {
display: inline-block;
margin: 15px 0;
}
.category-list ul li a {
text-decoration: none;
color: #000;
padding: 3px 20px;
font-weight: 600;
}
.services-box img {
margin-bottom: 15px
}
.category-list {
background: #edf4ff;
}
.flex-archive {
display: flex;
flex-wrap: wrap;
align-content: center;
align-items: center;
justify-content: space-between;
padding: 40px 0
}
.blog-header {
margin-bottom: 25px;
}
.blog-page .blog-innr {
padding: 0;
}
@media (min-width: 992px) {
.blog-page-innr .blog-lists {
padding: 40px 0;
}
.blog-page-innr .all-category {
width: 20%;
margin-top: 57px;
}
.blog-header {
margin: 0 41px 50px 28px;
}
}* {
padding: 0;
margin: 0;
box-sizing: border-box;
text-decoration: none;
list-style: none;
font-family: 'tajawal', sans-serif;
}
:root {
--main-color: #1F5FFF;
--second-color: #04CE78;
--dark-color: #000D44;
--parg-color: #666666;
--name-item: #0066c0;
--drak-red: #d01418;
--border-color: #6666662a;
--border: 1px solid #6666662c;
}
body {
direction: rtl;
}
html {
scroll-behavior: smooth;
}
h1,h2,h3,h4,h5,h6{
color: var(--dark-color);
}
p {
color: var(--parg-color);
}
.container{
width: 75%;
margin: auto
}
section{
padding: 50px 0;
}
.btn{
padding: 13px 40px;
background: var(--main-color);
color: #fff;
font-size: 18px;
border-radius: 5px;
font-weight: bold;
border: 2px solid var(--main-color);
transition: 0.3s ease;
scale: 1;
}
.btn:hover{
scale: 1.2;
}
.top_sec{
text-align: center;
margin-bottom: 50px;
}
.top_sec h3{
background: var(--main-color);
width: max-content;
margin: 0 auto 30px;
padding: 10px 30px;
border-radius: 30px;
color: #fff;
}
.top_sec p{
font-size: 25px;
font-weight: 600;
color: var(--dark-color);
} .top_sec_page{
background: url(//www.wajehat-ahjar.com/wp-content/themes/CityStone/assets/img/hero_bg_4_1.png);
background-size: cover;
background-position: right bottom;
}
.top_sec_page .container{
display: flex;
justify-content: center;
align-items: center;
height: 100%;
position: relative;
padding: 140px 0;
}
.top_sec_page h3{
font-size: 50px;
color: var(--main-color);
} .top_sec_page .shape{
position: absolute;
}
.top_sec_page .shape1{
top: 80px;
right: 10px;
}
.top_sec_page .shape2{
top: 80px;
left: 0;
}
.top_sec_page .shape3{
bottom: 80px;
right: 10px;
}
.top_sec_page .shape4{
bottom: 80px;
left: 0;
}
.top_sec_page .shape1,
.top_sec_page .shape2{
animation: rotate linear infinite 9s;
}
@keyframes rotate{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
.top_sec_page .shape3{
animation: movetop3 linear infinite 2.5s;
}
.top_sec_page .shape4{
animation: movetop4 linear infinite 3s;
}
@keyframes movetop3{
0%{
bottom: 80px;
}
50%{
bottom: 110px;
}
100%{
bottom: 80px;
}
}
@keyframes movetop4{
0%{
bottom: 80px;
}
50%{
bottom: 40px;
}
100%{
bottom: 80px;
}
}
@media(max-width:1450px){
.container{
width: 90%;
}
}
@media(max-width:1000px){
.top_sec_page .container{
flex-direction: column;
justify-content: center;
gap: 50px;
}
.top_sec_page .container .div_text{
width: 100%;
}
.top_sec_page .container .div_img{
width: 80%;
}
}
@media(max-width:500px){
.container{
width: 95%;
}
.top_sec h3{
font-size: 30px;
}
.top_sec p{
font-size: 15px;
}
.top_sec_page .shape1{
top: 30px;
}
.top_sec_page .shape2{
top: 30px;
}
.top_sec_page .shape1 img{
width: 35px;
}
.top_sec_page .shape2 img{
width: 20px;
}
.top_sec_page .shape3 img{
width: 35px;
}
.top_sec_page .shape4 img{
width: 40px;
}
.top_sec_page{
height: auto;
}
.top_sec_page .container{
padding: 100px 0;
}
.top_sec_page .container .div_img{
width: 100%;
}
.top_sec_page .div_text{
text-align: center;
}
.top_sec_page .div_text h1{
font-size: 35px;
}
.top_sec_page .div_text .div{
flex-direction: column;
}
.top_sec_page .div_text h6{
margin-inline: auto;
}
.top_sec_page h3{
font-size: 40px;
}
} .contact_us .container{
display: flex;
justify-content: space-between;
align-items: center;
padding: 70px 0;
}
.contact_us .div_form{
width: 47%;
}
.contact_us .div_form .top_form{
display: flex;
justify-content: space-between;
align-items: center;
padding: 50px 40px;
background: var(--main-color);
}
.contact_us .div_form .top_form h5{
color: #fff;
margin-bottom: 15px;
}
.contact_us .div_form .top_form p{
font-size: 18px;
color: #fff;
}
.contact_us .div_form .top_form .icon{
background-color: #3b9df8;
padding: 18px;
border-radius: 50%;
width: 80px;
height: 80px;
transition: 0.3s ease;
position: relative;
direction: ltr;
z-index: 10;
}
.contact_us .div_form .top_form .icon:before,
.contact_us .div_form .top_form .icon:after{
content: "";
top: 0;
left: 0;
position: absolute;
height: 100%;
width: 100%;
background-color: #3b9df8;
border-radius: 50%;
opacity: 0.7;
}
.contact_us .div_form .top_form .icon:before{
animation: callan 2s ease-out infinite;
}
.contact_us .div_form .top_form .icon:after{
animation: callan 2s 1s ease-out infinite;
}
@keyframes callan   {
100%{
transform: scale(1.8);
opacity: 0;
}
}
.contact_us .div_form .top_form .icon:hover{
background: #fff;
}
.contact_us .div_form .top_form .icon svg{
fill: #fff;
width: 100%;
transition: 0.3s ease;
position: relative;
top: 3px;
z-index: 10;
}
.contact_us .div_form .top_form .icon:hover svg{
fill: var(--main-color);
}
.contact_us form{
padding: 50px 30px 20px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
box-shadow: 0px 5px 120px 0px rgba(39, 71, 125, 0.15);
}
.contact_us form .inp{
width: 45%;
margin-bottom: 30px
}
.contact_us form .inp input,
.contact_us form .inp select{
width: 100%;
border-radius: 5px;
padding: 18px 10px;
border: none;
outline: none;
border: 1px solid #c5c5c5;
font-size: 18px;
}
.contact_us form .inp input:focus,
.contact_us form .inp select:focus{
border-color: var(--main-color);
transition: 0.3s;
}
.contact_us form .btns_form{
margin: auto;
margin-top: 20px;
}
.contact_us form .btns_form button{
margin: auto;
outline: none;
border: none;
background: var(--main-color);
padding: 14px 40px;
text-align: center;
color: #fff;
font-size: 20px;
border-radius: 5px;
cursor: pointer;
transition: 0.3s ease-in-out;
}
.contact_us form .btns_form button:hover{
transform: scale(1.2);
}
.contact_us .textf{
width: 50%;
}
.contact_us .box{
display: flex;
align-items: center;
gap: 25px;
width: 100%;
padding: 20px 30px 17px 30px;
background-color: #fff;
box-shadow: 5px 0 30px 0 rgba(0, 0, 0, 0.04);
border-left: 3px solid var(--main-color);
margin: 30px 0 40px 0;
max-width: 500px;
}
.contact_us .box:hover{
border-color: var(--main-color);
}
.contact_us .box .icon{
background: var(--main-color);
width: 55px;
height: 55px;
border-radius: 50%;
padding: 10px;
}
.contact_us .box .icon img{
width: 100%;
}
.contact_us .box .text{
display: flex;
flex-direction: column;
}
.contact_us .box .text h3{
margin-bottom: 25px;
font-size: 25px;
}
.contact_us .box a{
font-size: 18px;
color: var(--dark-color);
margin-bottom: 10px;
font-weight: 500;
}
.contact_us .box .text .soial {
display: flex;
align-items: center;
gap: 15px;
}
.contact_us .box .text .soial img{
width: 50px;
}
.contact_us .box .text .soial a{
margin-bottom: 0;
}
.contact_us .textf h5{
font-size: 30px;
color: var(--main-color);
}
.contact_us .textf h2{
font-size: 40px;
color: var(--dark-color);
margin: 10px 0 30px;
}
.contact_us .textf p{
font-size: 15px;
}
@media (max-width:1000px) {
.contact_us .container{
flex-direction: column;
gap: 50px;
}
.contact_us .div_form{
width: 80%;
}
.contact_us .textf{
width: 100%;
}
}
@media (max-width:500px){
.contact_us .container{
gap: 30px;
}
.contact_us .div_form{
width: 100%;
}
.contact_us .textf{
width: 100%;
}
.contact_us .box .icon{
padding: 12px;
}
.contact_us .box .icon img{
width: 100%;
margin: auto;
}
.contact_us .box{
margin: 15px 0;
padding: 20px;
}
.contact_us .textf h2{
font-size: 30px;
margin-bottom: 20px;
}
.contact_us .textf p{
font-size: 14px;
margin-bottom: 30px;
}
.contact_us .box .text h3{
font-size: 20px;
margin-bottom: 15px;
}
.contact_us .box a{
font-size: 15px;
}
.contact_us .box .text .soial img{
width: 40px;
}
.contact_us form .inp{
width: 100%;
margin-bottom: 15px;
}
.contact_us .div_form .top_form{
padding: 20px 20px;
}
.contact_us .div_form .top_form .icon{
width: 50px;
height: 50px;
padding: 8px;
}
.contact_us form{
padding: 30px 20px;
}
.contact_us form .inp input, .contact_us form .inp select,
.contact_us form .inp input, .contact_us form .inp input{
padding: 12px;
font-size: 15px;
}
}