/* STRAT GENERAL */
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
html{
    --main-color:#1787e0;
    --alt-color:#d1d2d3;
    --main-transition:.3s;
    --section-background:#ececec;
    scroll-behavior: smooth;
}
@font-face{
    font-family: "Cairo";
    src: url("../font/Cairo-VariableFont_slnt\,wght.ttf");
}
body{
    font-family:"Cairo",Verdana;
}
a{
    text-decoration: none;
}
ul{
    list-style-type: none;
}
.container{
    width: 80%;
    margin: 0 auto;
}
.clear{
    clear: both;
}
.main-padding{
    padding: 100px 0;
}
.main-padding-top{
    padding-top: 100px;
}
/* START MAIN TITLE */
.main-title{
    width: fit-content;
    border: 2px solid #000;
    font-size:30px;
    margin:0 auto 50px;
    padding: 0px 20px;
    position: relative;
    text-transform: uppercase;
}
.main-title::before,.main-title::after{
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: var(--main-color);
    transition: .4s;
}
.main-title::after{
    right: -30px;
}
.main-title::before{
    left: -30px;
}
.main-title:hover{
    background-color: var(--main-color);
    transition-delay: var(--main-transition);
    border-color: transparent;
    color: #fff;
}
.main-title:hover::after{
    right: 0;
    opacity: 0;
}
.main-title:hover::before{
    left: 0;
    opacity: 0;
}

/* END MAIN TITLE */
/* START OVERLAY */
.stats,.prices-info,#footer{
    position: relative;
    z-index: 2;
}
.stats::after,.prices-info::after,#footer::after{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.7);
    top: 0;
    left: 0;
    z-index: -1;
}
/* END OVERLAY */
/* END GENERAL */
/* START HEADER */
#header{
    height: 70px;
    line-height: 70px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    z-index: 999;
}
#header .logo{
    float: left;
    width: 27%;
    height: 70px;
}
#header .container .logo > a{
    color: var(--main-color);
    font-size: 25px;
    font-weight: bold;
}
#header .container > ul{
    float: left;
    width: 73%;

}
#header .container > ul > li{
    display: inline-block;
    height: 70px;
}
#header .container > ul > li > a{
    color: black;
    padding: 0 20px;
    height: 70px;
    text-transform: capitalize;
    display: inline-block;
    position: relative;
    overflow: hidden;
    font-size: 1.1rem;
}
#header .container > ul > li > a::after{
    content: "";
    width:100%;
    height: 4px;
    background-color: var(--main-color);
    position: absolute;
    top: 0;
    left: -100%;
    transition:var(--main-transition);
}
#header .container > ul > li > #acitve::after{
    left: 0 
}
#header .container > ul > li > #acitve{
    background-color: var(--section-background);
    color: var(--main-color);
}
#header .container > ul > li > a:hover{
    background-color: var(--section-background);
    color: var(--main-color);
}
#header .container > ul > li > a:hover::after{
    left: 0;
}
#header .container > ul > li > a > .down-icon{
    margin-right: 10px;
}
/* STATRT MEGA MENU */
#header .container > ul > li >.mega-menu{
  position: absolute;
  border-top: 1px solid var(--main-color);
  border-bottom-left-radius:13px;
  border-bottom-right-radius: 13px;
  overflow: hidden;
  top: 70px;
  left:0px;
  width: 100%;
  display: none;
  background-color: #fff;
}
#header .container > ul > li >.mega-menu li:not(:last-child){
    border-bottom: 1px solid var(--section-background);
}
#header .container > ul > li >.mega-menu li a{
    color: var(--main-color);
    display: block;
    transition: var(--main-transition);
}
#header .container > ul > li >.mega-menu li a:hover{
    background-color: var(--section-background);
    padding-left: 10px;
}
#header .container ul .drop-menu{
    position: relative;
}
#header .container ul .drop-menu:hover .mega-menu{
    display: block;
}
#header .container .social-icon{
    margin: 0 10px;
}
/* END MEGA MENU */
/* END HEADER */
/* START HOME */
#home{
    height: 100vh;
    background-image: url("../imgs/mountains-1112911_1920.jpg");
    background-size: cover;
    position: relative;
}
#home::after{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0,0,.2);
    left: 0;
    top: 0;
}
#home .home-content{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 65%;
    text-align: center;
    z-index:2;
}
#home .container h1{
    color: var(--main-color);
    font-size: 55px;
    text-transform: capitalize;
    margin-bottom: 50px;
}
#home .container p{
    color: var(--alt-color);
    font-size: 30px;
    text-transform: capitalize;
}
#home .container .links{
    margin-top: 30px;
}
#home .container a{
    width: 120px;
    display: inline-block ;
    border: 1px solid var(--main-color);
    border-radius: 8px;
    font-size: 18px;
    padding: 5px 10px;
    position: relative;
    overflow: hidden;
    color: var(--main-color);
    text-transform: capitalize;
}
#home .container a:first-of-type{
    margin-right: 10px;
}
#home .container a::after{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    left: -100%;
    top: 0;
    background-color: var(--main-color);
    z-index: -1;
    transition: var(--main-transition);
}
#home .container a:hover::after{
    left: 0;
}
#home .container a:hover{
    border-color: transparent;
    color: white;
}
/* END HOME */
/* START ABOUT */
#about .container .about-content{
    overflow: auto;
    padding: 20px;
}
#about .container .about-content .box{
    float: left;
    width: calc(86%/3);
    text-align: center;
    padding: 15px;
    margin:1%;
    box-shadow: 0px 2px 15px rgba(0,0,0,.1);
    transition: var(--main-transition);
    position: relative;
    overflow: hidden;
}
#about .container .about-content .box-two{
    margin: 1% 5%;
}
#about .container .about-content .box .icon{
    font-size: 35px;
}
#about .container .about-content .box h3{
    font-size: 25px;
    margin-bottom: 20px;
}
#about .container .about-content .box p{
    text-align: left;
    color: grey;
}
#about .container .about-content .box a{
    display: inline-block;
    color: var(--main-color);
    margin-top: 20px;
}
#about .container .about-content .box::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 0;
    background-color: #333 ;
    transition: var(--main-transition);
    z-index: -1;
}
#about .container .about-content .box:hover::after{
    width: 100%;
    height: 100%;
}
#about .container .about-content .box:hover{
    box-shadow: 0px 2px 15px rgba(0,0,0,.3);
    transform: translateY(-10px);
}
#about .container .about-content .box:hover a,#about .container .about-content .box:hover h3,#about .container .about-content .box:hover .icon{
    color: #fff;
}
/* END ABOUT */
/* START PORTIFLIOP */
#protiflio{
    background-color: var(--section-background);
}
#protiflio .container .protiflio-content ul{
    text-align: center;
}
#protiflio .container .protiflio-content ul li{
    display: inline-block;
    padding: 10px;
    text-transform: capitalize;
    font-size: 18px;
    cursor: pointer;
}
#protiflio .container .protiflio-content ul li.active{
    background-color: var(--main-color);
    color: #fff;
}
#protiflio .container .protiflio-content .images{
   overflow: auto;
   margin-top: 20px;
}
#protiflio .container .protiflio-content .images .box{
    float: left;
    width: 25%;
    position: relative;
    overflow: hidden;
}
#protiflio .container .protiflio-content .images .box img{
    max-width: 100%;
    height: auto;
    display: block;
}
#protiflio .container .protiflio-content .images .box .layer{
    position: absolute;
    width: 100%;
    background-color: rgba(255,255,255,.8);
    left: 0;
    bottom:-100%;
    transition: var(--main-transition);
    padding: 5px 10px ;
    text-align: center;
}
#protiflio .container .protiflio-content .images .box .layer  h3{
    font-size: 18px;
    opacity: 0;
    position: relative;
    top: 30px;
    transition:top 1s,opacity .5s;
    transition-delay: .3s;
}
#protiflio .container .protiflio-content .images .box:hover .layer  h3,#protiflio .container .protiflio-content .images .box:hover .layer  p{
    opacity: 1;
    top: 0;
}
#protiflio .container .protiflio-content .images .box .layer  p{
    color: var(--main-color);
    opacity: 0;
    position: relative;
    top: 30px;
    transition:top 1s,opacity .5s;
    transition-delay: .6s;
}
#protiflio .container .protiflio-content .images .box .layer .icon{
    margin: 10px 0;
}
#protiflio .container .protiflio-content .images .box .layer .icon a{
    width: 30px;
    height: 30px;
    display: inline-block;
    background-color: var(--main-color);
    border-radius: 50%;
    color: #fff;
    line-height: 30px;
    margin-right: 10px;
}
#protiflio .container .protiflio-content .images .box:hover .layer{
    bottom: 0;
}

/* END PORTIFLIO */
/* START SERVICES */
/* START CATGORIES */
#services .servics-content .categories{
    overflow: auto;
    padding: 20px;
}
#services .servics-content .categories .box{
    width: calc(90%/3);
    padding-top: 20px;
    position:relative;
    transition: var(--main-transition);
    box-shadow: 0 12px 20px 0 rgb(0 0 0 / 13%), 0 2px 6px 0 rgb(0 0 0 / 12%);
    float: left;
    margin-bottom: 20px;
}
#services .servics-content .categories .box::after{
    content:"";
    position: absolute;
    top: -3px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 3px;
    background-color: var(--main-color);
    transition: var(--main-transition);
}
#services .servics-content .categories .box:hover{
    transform: translateY(-5px);
}
#services .servics-content .categories .box:hover::after{
    width: 100%;
}
#services .servics-content .categories .box-two{
    margin-left: 5%;
    margin-right: 5%;
}
#services .servics-content .categories .box .icon{
    text-align: center;
 }
 #services .servics-content .categories .box .icon i{
    display: block;
    font-size: 60px;
    color: #d5d5d5
 }
 #services .servics-content .categories .box .icon h3{
    margin:15px 0;
    font-size: 25px;
    color: var(--main-color);
 }
 #services .servics-content .categories .info{
    background:#f9f9f9;
    text-align: end;
    padding: 5px 10px;
    position: relative;
 }
 #services .servics-content .categories .info::before {
    position: absolute;
    background-color: var(--main-color);
    height: 100%;
    width: 80px;
    left: 0;
    bottom: 0;
    font-weight: bold;
    line-height: 130%;
    color: #fff;
    text-align: center;
    font-size: 30px;
 }
 #services .servics-content .categories .info::after {
    content: "";
    position: absolute;
    background-color: #d5d5d5;
    height: 100%;
    width: 50px;
    left: 68px;
    bottom: 0;
    transform: skewX(-30deg);
 }
 #services .servics-content .categories .info1::before {
    content: "01";
 }
 #services .servics-content .categories .info2::before {
    content: "02";
 } 
 #services .servics-content .categories .info3::before {
    content: "03";
 }
  #services .servics-content .categories .info4::before {
    content: "04";
 } 
 #services .servics-content .categories .info5::before {
    content: "05";
 } 
 #services .servics-content .categories .info6::before {
    content: "06";
 }
 #services .servics-content .categories .info a{
    color: var(--main-color);
 }
/* END CATGORIES */
/* START WHY US */
.why-us{
    overflow: auto;
    background-color: var(--section-background);
}
.why-us .container >div{
    float: left;
    width: calc(95%/2);
}
.why-us .why-info{
    background-color: rgba(23, 135, 224,.2);
    padding: 50px 25px;
    margin-right: 5%;
    border-radius: 10px;
}
.why-us .why-info h3{
    font-size: 35px;
    margin-bottom: 15px;
}
.why-us .why-info ul li{
    font-size: 18px;
}
.why-us .why-info ul li i{
    margin-right: 15px;
}
.why-us .why-image img{
    display: block;
    margin-left: auto;
    max-width: 100%
}
.why-us .why-image ul{
    text-align: center;
    margin-top: 20px;
}
.why-us .why-image ul li{
    width: 20px;
    height: 20px;
    background-color: #d1d2d3;
    border-radius: 50%;
    display: inline-block;
    margin-right: 40px;
}
.why-us .why-image ul li.active{
    background-color: var(--main-color)
}
.why-us .why-image ul li:hover{
    background-color: var(--main-color)
}
/* END WHY US */
/* STRAT STATS  */
.stats{
    background-image: url("../imgs/stats.webp");
    background-size: cover;
    background-attachment: fixed;
}

.stats .container .stats-content{
    overflow:auto;
    background-color: #19c8fa42;
    padding: 20px;
    color: #fff;
}
.stats .container .stats-content .box{
    width: 25%;
    float: left;
    text-align: center;
}
.stats .container .stats-content .box i{
    font-size: 20px;
    padding: 10px;
    background-color: #000;
    border-radius: 50%;
    margin-bottom: 15px;
}
.stats .container .stats-content .box h3{
    font-size: 40px;
}
.stats .container .stats-content .box p{ 
    font-size: 14px;
}
/* END STATS  */
/* END SERVICES */
/* START PRICES */
#prices{
    background-color: var(--section-background);
}
#prices .prices-content{
    overflow: auto;
    padding: 10px;
}
#prices .prices-content .box{
    background-color: #fff;
    width: calc(90%/3);
    padding: 20px 0;
    float: left;
    box-shadow: 0 12px 20px 0 rgb(0 0 0 / 13%), 0 2px 6px 0 rgb(0 0 0 / 12%);
    position: relative;
    z-index: 2;
    overflow: hidden;
}
#prices .prices-content .box::after,#prices .prices-content .box::before{
    content: "";
    position: absolute;
    height: 50%;
    width: 100%;
    z-index: -1;
    background-color: #f6f6f6;
    transition: var(--main-transition);
}
#prices .prices-content .box::after{
    left: -100%;
    top: 0;
}
#prices .prices-content .box::before{
    right: -100%;
    top: 50%;
}
#prices .prices-content .box:hover::after{
   left: 0;
}
#prices .prices-content .box:hover::before{
    right: 0;
}
#prices .prices-content .box h3{
    text-align: center;
    font-size: 25px;
    margin: 25px 0;
}
#prices .prices-content .box-two{
    margin:0 5%;
    transform: translateY(-10px);
    position: relative;
}
#prices .prices-content .box-two .decor{
    position: absolute;
    right: 20px;
    width: 50px;
    top: 0;
    font-size: 18px;
    background-color: var(--main-color);
    writing-mode: vertical-rl;
    color: #fff;
    padding: 10px 10px 35px 10px;
    font-weight: bold;
}
#prices .prices-content .box-two .decor::after{
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    border-style: solid;
    border-color: transparent transparent white transparent;
    border-width: 25px;
}
#prices .prices-content .box-two:hover .decor::after{
    border-color: transparent transparent #f6f6f6 transparent;
}
#prices .prices-content .box img{
    width: 80px;
    display: block;
    margin: auto;
    margin-bottom: 25px;
}
#prices .prices-content .box ul li{
    padding: 20px;
    border-top:1px solid #eee ;
}
#prices .prices-content .box ul li i{
    color: var(--main-color);
    margin-right: 10px;
    font-weight: 900;
    font-size: 18px;
}
#prices .prices-content .box .amount{
    margin-bottom: 20px;
}
#prices .prices-content .box .amount .amount-span{
    display:block;
    font-size: 45px;
    font-weight: bold;
    text-align: center;
    color: var(--main-color);
}
#prices .prices-content .box .amount .time-span{
    text-align: center;
    display: block;
    margin-top: -20px;
    color:gray;
}
#prices .prices-content .box a{
    width: fit-content;
    border: 2px solid var(--main-color);
    display: block;
    color: var(--main-color);
    font-weight: bold;
    padding: 15px 20px;
    border-radius: 6px;
    margin: 30px auto;
    transition: var(--main-transition);
}
#prices .prices-content .box a:hover{
    background-color: var(--main-color);
    color: #fff;
}
/* STRART PRICES INFO */
.prices-info {
    background-image: url("../imgs/design-features.webp");

}
.prices-info .container .prices-info-content{
    overflow: auto;
}
.prices-info .container .prices-info-content .box {
    width: calc(95%/2);
    float: left;
}
.prices-info .container .prices-info-content .box-one {
    margin-right: 5%;
}
.prices-info .container .prices-info-content .box .item{
    color: #fff;
    position: relative;
    overflow: auto;
}
.prices-info .container .prices-info-content .box .item .image{
    width: 30%;
    float: left;
    text-align: center;
}
.prices-info .container .prices-info-content .box .item .image img{
   width: 100px;
   border-radius: 50%;
}
.prices-info .container .prices-info-content .box .item .info{
   float: left;
   width: 70%;
   margin-top: 20px;
}
.prices-info .container .prices-info-content .box .item .info span{
    color: var(--main-color);
    
 }
.prices-info .container .prices-info-content .box p{
    color: #d1d2d3;
    margin-top: 20px;
}
/* END PRICES INFO */
/* END PRICES */

/* START TEAM  */
#team .container .team-content {
    overflow: auto;
    padding: 30px;
}
#team .container .team-content .box {
    float: left;
    width: calc(86%/3);
    box-shadow: 0 12px 20px 0 rgb(0 0 0 / 13%), 0 2px 6px 0 rgb(0 0 0 / 12%);
    padding: 20px;
    text-align: center;
    overflow: hidden;
    position: relative;
}
#team .container .team-content .box .info{
    transition-delay: .3s;
    margin-top: 20px;
}
#team .container .team-content .box:hover .info{
    color: #fff
}
#team .container .team-content .box .image{
    position: relative;
    width: 90%;
    margin: auto;
}
#team .container .team-content .box .image .team-overlay{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    opacity: 0;
    transition: var(--main-transition);
}
#team .container .team-content .box-one .image .team-overlay{
    background-color: rgba(23, 135, 224,.6);
}
#team .container .team-content .box-two .image .team-overlay{
    background-color: rgb(0 150 136 / 60%);
}
#team .container .team-content .box-three .image .team-overlay{
    background-color: rgb(244 64 54 / 60%);
}
#team .container .team-content .box:hover .image .team-overlay{
    opacity: 1;
}
#team .container .team-content .box::after,#team .container .team-content .box::before{
    content: "";
    position: absolute;
    width: 100%;
    height: 50%;
    transition: var(--main-transition);
    transition-delay: .3s;
    z-index: -1;
}
#team .container .team-content .box-one::after,#team .container .team-content .box-one::before{
    background-color: rgba(23, 135, 224,.6);
}
#team .container .team-content .box-two::after,#team .container .team-content .box-two::before{
    background-color: rgb(0 150 136 / 60%);
}
#team .container .team-content .box-three::after,#team .container .team-content .box-three::before{
    background-color: rgb(244 64 54 / 60%);
}
#team .container .team-content .box::after{
    top: 0;
    left: -100%;
}
#team .container .team-content .box::before{
    top: 50%;
    right: -100%;
}
#team .container .team-content .box:hover::after{
    left: 0
}
#team .container .team-content .box:hover::before{
    right: 0
}
#team .container .team-content .box .image .team-overlay a{
    display: block;
    height: 30px;
    width: 30px;
    border-radius: 50%;
    background-color: #000;
    color: #fff;
    margin: 10px 10px 0 auto;
}
#team .container .team-content .box .image .team-overlay a i{
    line-height: 30px;
}
#team .container .team-content .box .image img{
    width: 100%;
    display: block;
}
#team .container .team-content .box-two {
    margin: 0 5%;
}
/* END TEAM  */
/* START BLOG */
#blog .container .blog-content {
    overflow: auto;
    padding: 20px;
}
#blog .container .blog-content .box{
    width: calc(90%/3);
    float: left;
    box-shadow: 0 12px 20px 0 rgb(0 0 0 / 13%), 0 2px 6px 0 rgb(0 0 0 / 12%);
    padding: 20px;
    overflow: hidden;
    position: relative;
}
#blog .container .blog-content .box::after,#blog .container .blog-content .box::before{
    content: "";
    position: absolute;
    width:50%;
    height: 100%;
    transition: var(--main-transition);
    z-index: -1;
}
#blog .container .blog-content .box-one::after,#blog .container .blog-content .box-one::before{ 
    background-color: rgba(23, 135, 224,.6);
}
#blog .container .blog-content .box-two::after,#blog .container .blog-content .box-two::before{
    background-color: rgb(0 150 136 / 60%);
}
#blog .container .blog-content .box-three::after,#blog .container .blog-content .box-three::before{
    background-color: rgb(244 64 54 / 60%);
}
#blog .container .blog-content .box::after{
    left:0;
    top:-100%;
}
#blog .container .blog-content .box::before{
    left: 50%;
    bottom:-100%;
}
#blog .container .blog-content .box:hover .info p ,#blog .container .blog-content .box:hover .info a,#blog .container .blog-content .box:hover .info h3{
    color: #fff
;}
#blog .container .blog-content .box:hover::after{
    top: 0;
}
#blog .container .blog-content .box:hover::before{
    bottom:0;
}
#blog .container .blog-content .box-two{
    margin: 0 5%;
}
#blog .container .blog-content .box .image img{
    max-width: 100%;
    display: block;
}
#blog .container .blog-content .box .info ul{
    text-align: center;
    margin: 20px 0;
    background-color: var(--section-background);
}
#blog .container .blog-content .box .info ul li{
        display: inline-block;
        margin-left: 15px;
        text-align: left;
}
#blog .container .blog-content .box .info ul li i{
    color: var(--main-color);
}
#blog .container .blog-content .box .info h3{
    margin-bottom: 10px;
    text-align: center;
}
#blog .container .blog-content .box .info p{
    color: gray;
}
#blog .container .blog-content .box .info a{
    margin-top: 20px;
    display: block;
    color: var(--main-color);
}
/* END BLOG */
/* START FOOTER */
#footer{
    background-image: url("../imgs/subscribe.webp");
    text-align: center;
}
#footer .container .footer-content .image img{
    width: 200px ;
}
#footer .container .footer-content ul{
    margin-top: 20px;
}
#footer .container .footer-content ul li{
    width: 35px;
    height: 35px;
    display: inline-block;
    background-color: var(--main-color);
    border-radius: 50%;
    margin-left: 10px;
    transition: var(--main-transition);
}
#footer .container .footer-content ul li:hover{
    background-color: transparent;
}
#footer .container .footer-content ul li a{
    width: 100%;
    height: 100%;
    line-height: 35px;
    display: block;
    color: #fff;
}
#footer .container .footer-content p{
    color: #d5d5d5;
    font-size: 19px;
    margin-top: 30px;
}
#footer .container .footer-content p span{
    color: var(--main-color);
}
/* END FOOTER */
/* ============== End site __hope this effort be enough for this work to be accepted ( ^_^ ) ================== */