/* global rules*/
:root {
    --blue: #007bff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #28a745;
    --teal: #20c997;
    --cyan: #17a2b8;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --primary: #007bff;
    --secondary: #6c757d;
    --success: #28a745;
    --info: #17a2b8;
    --warning: #ffc107;
    --danger: #dc3545;
    --light: #f8f9fa;
    --dark: #343a40;
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
}
@font-face
{
    src: url(../Cairo/Cairo-SemiBold.ttf);
    font-family:'cairo-semibold' sans-serif;
}
/*end global rules*/
/*start header*/
html
{
    scroll-behavior: smooth;
}
body
{
    font-family: 'cairo-semibold' sans-serif;
}
header
{
    background-image: url(../images/banner-bg.png);
    background-size: cover;
    background-repeat: no-repeat;
    overflow-x: hidden;
}
/*start navbar*/
@media(min-width:1200px)
{
.navbar-default 
{
    top: 20px;
    width: 80%;
    margin: auto;
    overflow-x: hidden;
    border-radius: 40px;
    height: 80px;
    overflow-y:hidden;
}
.navbar>.container .navbar-brand,
.navbar>.container-fluid .navbar-brand img
 {
     margin-left: 15px;
     line-height: 40px;
 }
 .navbar-nav.navbar-right:last-child
 {
     margin-right: 130px;
 }
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.active>a:focus 
{
    background-color: transparent;
    color: var(--pink);
}
 .navbar-default .navbar-nav>li>a
 {
     margin-right: 10px;
     line-height: 50px;
     font-size: 14px;
     text-transform: capitalize;
 }
 .navbar-default .navbar-nav>li>a:hover
 {
     color: var(--pink);
 }
}
 /*end navbar*/
 /*start head text*/
 .head-text .text
 {
    position: relative;
    text-align: center;
    display: block;
    top: 200px;
 }
 .head-text .text h1
 {
     font-weight: bold;
     letter-spacing: 1.2px;
     color: white;
     line-height: 50px;
 }
 .head-text .text p
 {
     color: white;
     padding: 5px;
     text-transform: capitalize;
     letter-spacing: 1.6px;
     line-height: 30px;
 }
 .head-text .box
 {
     background-color: white;
     position: relative;
     height: 300px;
     width: 100%;
     border: 1px solid #eee;
     border-radius: 10px;
     margin-bottom: 20px;
     z-index: 100;
     overflow: visible;
 }
 .head-text .box img
 {
     width: 80px;
     height: 80px;
     display: block;
     margin: auto;
 }
 .head-text .box h3
 {
     line-height: 90px;
 }

 .head-text .box p
 {
     color: #777;
     padding: 15px;
     line-height: 30px;
 }
 .head-text .box .btn-danger:hover
 {
     background-color: #007bff;
 }
 /*end head*/
 /*start about*/
 .about
 {
     padding-top: 60px;
     padding-bottom: 60px;
 }
 .about .image-left
 {
     width: 100px;
 }
 .about .image-left img
 {
     width: 100px;
     display: block;
     margin: auto;
 }
 .about .text-righte
 {
     margin-top: 60px;
 }
 .about .text-righte h3
 {
     text-transform: capitalize;
     font-weight: bold;
     line-height: 60px;
 }
 .about .text-righte p
 {
     color: #777;
     font-size: 16px;
     text-transform: capitalize;
     letter-spacing: 1.3px;
     line-height: 30px;
 }
 /* second part of about section*/
 .about .image-right
 {
     width:100px;
     display: block;
     margin: auto;
 }
 .about .image-right img
 {
     width: 100px;
     display: block;
     margin: auto;
 }
 .about .text-lefte
 {
     margin-top: 120px;
 }
 .about .text-lefte h3
 {
     text-transform: capitalize;
     font-weight: bold;
     line-height: 20px;
 }
 .about .text-lefte p
 {
     color: #777;
     font-size: 16px;
     text-transform: capitalize;
     letter-spacing: 1.3px;
     line-height: 30px;
 }
 /* end about section*/
 /* start work section*/
 .work
 {
     background-image: url(../images/work-process-bg.png);
     background-size: cover;
 }
 .work .main-head
 {
     padding-top: 90px;
     padding-bottom: 30px;
 }
 .work .main-head h2
 {
     color: white;
     font-weight: bold;
     line-height: 40px;
 }
 .work .main-head p
 {
     color: white;
     font-size: 16px;
     padding: 25px;
     line-height: 30px;
 }
 .work .box
 {
     background-color: white;
     border-radius: 25px;
     box-shadow: 0px 2px 28px 0px rgba(0, 0, 0, .8);
     transition: .5s;
     margin-bottom: 20px;
 }
 .work .box:hover
 {
     transform: translateY(-25px);
 }
 .work .box img
 {
     padding: 15px;
 }
 .work .box h4
 {
     padding: 5px;
     text-transform: capitalize;
 }
 .work .box p
 {
     padding: 15px;
     color: #777;
     line-height: 20px;
     letter-spacing: 1.2px;
 }
 /*end work*/
 /*start testimonials*/
 .testimonials .head-test
 {
     padding-top: 70px;
     padding-bottom: 70px;
 }
 .testimonials .head-test h2
 {
     font-weight: normal;
     line-height: 50px;
     text-transform: capitalize;
     letter-spacing: 1.6px;
 }
 .testimonials .head-test p
 {
     font-size: 16px;
     color: #777;
     letter-spacing: 1px;
     line-height: 30px;
 }
 .testimonials .card
 {
     border: 2px solid #ddd;
     border-radius: 20px;
     margin-bottom: 25px;
 }
 .testimonials .card img
 {
     padding-top: 20px;
     padding-bottom: 20px;
 }
 .testimonials .card p
 {
     color: #777;
     font-size: 14px;
     padding: 5px;
     line-height: 20px;
 }
 .testimonials .card .person-img img
 {
     border-radius: 50%;
     transition: .7s;
 }
 .testimonials .card .person-img img:hover
 {
     transform: rotate(360deg);
 }
 .testimonials .card .person-text >p
 {
     color: #e83e8c;
 }
 /* end testimonials*/
 /*start pricing*/
 .pricing
 {
     background-color: #eee;
     background-size: cover;
     padding-bottom: 80px;
 }
 .pricing .head-tex
 {
     padding-top: 70px;
     padding-bottom: 90px;
 }
 .pricing .head-tex h2
 {
     text-transform: capitalize;
     letter-spacing: 1.6px;
     font-weight: bold;
     line-height: 50px;
 }
 .pricing .head-tex p
 {
     color: #777;
     letter-spacing: 1.8px;
     line-height: 30px;
     font-size: 16px;
 }
 .pricing .card
 {
     background-color: white;
     border: 2px solid white;
     border-radius: 20px;
     margin-bottom: 25px;
 }
 .pricing .card h4
 {
     font-size: 18px;
     padding-left: 40%;
     padding-top: 25px;
     padding-bottom: 25px;
     text-transform: capitalize;
     letter-spacing: 1px;
 }
 .pricing .card .price-one,
 .pricing .card .price-three

 {
     background-color: #6f42c1;
 }
 .pricing .card .price-two
 {
     background-color:#e83e8c;
 }
 .pricing .card .price-one,
 .pricing .card .price-two,
 .pricing .card .price-three
 {
     width: 70%;
     margin-left: 15%;
     text-align: center;
     border-radius: 20px;
 }
 .pricing .card .price-one strong,
 .pricing .card .price-two strong,
 .pricing .card .price-three strong
 {
     color: white;
     font-size: 24px;
     font-weight: bold;
     line-height: 50px;
 }
 .pricing .card .price-one p,
 .pricing .card .price-two p,
 .pricing .card .price-three p
 {
     color: white;
     font-size: 16px;
     line-height: 40px;
 }
 .pricing .card  ul,
 .pricing .card  ul,
 .pricing .card ul
 {
     list-style: none;
     margin-top: 60px;
 }
 .pricing .card  ul li,
 .pricing .card  ul li ,
 .pricing .card ul li
 {
     line-height: 40px;
     font-size: 16px;
     color: #777;
 }
 .pricing .card .button
 {
     background-color: #6f42c1;
     width: 50%;
     height: 40px;
     margin-left: 25%;
     text-align: center;
     margin-top:25px;
     margin-bottom: 25px;
     border-radius: 25px;
 }
 .pricing .card .button:hover
 {
     background-color: #e83e8c;
 }
 .pricing .card .button a
 {
     line-height: 40px;
     color: white;
     text-transform: uppercase;
 }
 .pricing .card .button a:hover
 {
     text-decoration: none;
     font-weight: bold;
 }
 /*end pricing*/
 /*start project*/
 .project
 {
     background-image: url(../images/fun-facts-bg.png);
     background-size: cover;
     overflow-x: hidden;
     padding-bottom: 20px;
     background-repeat: no-repeat;
 }
 .project .content
 {
     display: flex;
     align-items: center;
     margin-top: 20vh;
 }
 .project .content .pro,
 .project .content .clie,
 .project .content .win,
 .project .content .coun
 {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     padding-right: 60px;
     padding-left: 60px;
 }
 .project .content .pro span,
 .project .content .clie span,
 .project .content .win span,
 .project .content .coun span
 {
     color: white;
     font-size: 28px;
     font-weight: bold;
     letter-spacing: 1px;
    
 }
 .project .content .pro strong,
 .project .content .clie strong,
 .project .content .win strong,
 .project .content .coun strong
 {
     font-size: 32px;
 }
 .project .content .pro p,
 .project .content .clie p,
 .project .content .win p,
 .project .content .coun p
 {
     color: white;
     font-size: 22px;
     text-transform: capitalize;
     letter-spacing: 1px;
 }
 /* end project*/
 /*start blog*/
 .blog
 {
     padding-top: 60px;
     padding-bottom: 60px;
     overflow-x: hidden;
 }
 .blog .blog-head
 {
     text-align:center;
     padding-bottom: 30px;
 }
 .blog .blog-head h1
 {
     text-transform: capitalize;
     font-size: 28px;
     letter-spacing: 1.2px;
     line-height: 70px;
 }
 .blog .blog-head p
 {
     color: #777;
     font-size: 16px;
     letter-spacing: 1px;
     line-height: 30px;
 }
 .blog .blog-card
 {
     margin-bottom: 25px;
 }
 .blog .blog-card .blog-text h4
 {
     text-align: center;
     text-transform: capitalize;
     line-height: 60px;
     letter-spacing: .8px;
     font-weight: normal;
 }
 .blog .blog-card .blog-text h4:hover
 {
     color: var(--pink);
 }
 .blog .blog-card .blog-text p
 {
     text-align: center;
     color: #777;
     font-size: 13px;
     letter-spacing: 1px;
     line-height: 30px;
 }
 .blog .blog-card .blog-text button
 {
     display: block;
     margin: auto;
     margin-top: 30px;
     width: 140px;
     height: 50px;
     border: 1px solid transparent;
     border-radius: 25px;
     background-color: var(--purple);
 }
 .blog .blog-card .blog-text button:hover
 {
     background-color: var(--pink);
 }
 .blog .blog-card .blog-text a
 {
     color: white;
     text-transform: uppercase;
     font-size: 12px;
     letter-spacing: 1px;
     transition: .5s;
 }
 .blog .blog-card .blog-text a:hover
 {
     text-decoration: none;
 }
 /* end blog*/
 /*start contact us*/
 .contact-us
 {
     background-color: #eee;
     background-size: contain;
     overflow-x: hidden;
     padding-bottom: 120px;
 }
 .contact-us .contact-head
 {
     text-align: center;
     padding-top: 140px;
     padding-bottom: 80px;
 }
 .contact-us .contact-head h1
 {
     text-transform: capitalize;
     line-height: 70px;
 }
 .contact-us .contact-head p
 {
     color: #777;
     font-size: 14px;
     line-height: 30px;
     letter-spacing: 1.4px;
 }
 .contact-us .contact-text .one h3
 {
     text-transform: capitalize;
     letter-spacing: 1px;
     line-height: 70px;
 }
 .contact-us .contact-text .two p
 {
     color: #777;
     font-size: 15px; 
     line-height: 25px;
     letter-spacing: 1px;
     padding-bottom: 25px;
 }
 .contact-us .contact-text .three p
 {
    color: #777;
    font-size: 15px; 
    line-height: 25px;
    letter-spacing: 1px;
    padding-bottom: 25px;
 }
 .contact-us form .user-info #text
 {
    width: 45%;
    height: 50px;
    border: 1px solid transparent;
    border-radius: 25px;
    padding-left: 15px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-right: 8%;
 }
 .contact-us form .user-info #mail
 {
    width: 45%;
    height: 50px;
    border: 1px solid transparent;
    border-radius: 25px;
    padding-left: 15px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
 }
 .contact-us form .user-message #message
 {
     width: 100%;
     height: 220px;
     border: 1px solid transparent;
     border-radius: 25px;
     padding-left: 15px;
     margin-top: 40px;
     text-transform: uppercase;
     letter-spacing: 1.2px;
 }
 .contact-us form  button
 {
     width: 150px;
     height: 40px;
     border: 1px solid transparent;
    border-radius: 25px;
    background-color: var(--purple);
    margin-top: 30px;
    margin-bottom: 20px;
 }
 .contact-us form  button a
 {
     text-transform: uppercase;
     letter-spacing: 1.2px;
     color: white;
     text-align: center;
     font-size: 12px;
 }
 /*end contact*/
 /*start footer*/
 footer
 {
     background-color: var(--purple);
     background-size: cover;
     overflow-x: hidden;
 }
 footer .icon
 {
     display: flex;
     justify-content: center;
     align-items: center;
     justify-content: space-evenly;
     width: 50%;
     margin-left: 25%;
 }
 footer .icon a
 {
     margin-top: 40px;
     margin-bottom: 40px;
     width: 40px;
     height: 40px;
     background-color: #fff;
     border-radius: 50%;
     text-align: center;
     line-height: 40px;
     font-size: 16px;
     color: var(--purple);
     margin-right: 10px;
 }
 footer .icon a
 {
     color: black;
 }
 footer .icon i
 {
     color: black;
 }
 footer .icon a:hover
 {
     background-color: var(--pink);
     color: white;
 }
 footer .foot-text
 {
     text-align: center;
     margin-bottom: 30px;
     color: white;
     font-size: 12px;
     letter-spacing: 1.2px;
     line-height: 80px;
     position: relative;
 }
 footer .foot-text::before
 {
     content: "";
     position: absolute;
     z-index: 20;
     width: 90%;
     height: 1px;
     background-color: white;
     color: white;
     top: 0;
     right: 5%;
 }