/* start variable*/
:root {
    --main-color: #19c8fa;
    --transparent-color:rgb(15 116 143 / 70%);
    --section-padding:100px;
}

/* end variable*/
/* start global rules */
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Open Sans', sans-serif;
}

ul {
    list-style: none;
}

.container {
    padding-left: 10px;
    padding-right: 10px;
    margin-left: auto;
    margin-right: auto;
    min-height: 97px;
}
/* Extra  small */
@media (min-width: 576px){
    .container {
        max-width: 540px;
    }
}
/* small */
@media (min-width: 768px) {
    .container {
        max-width: 750px;
    }
}
/* medium */
@media (min-width: 992px) {
    .container {
        max-width: 970px;
    }
}

/* large */
@media (min-width: 1200px) {
    .container {
        max-width: 1170px;
    }
}
.main-heading {
    padding-top:100px ;
    text-align: center;

    height: 400px;

}
.main-heading h2{    
    text-align: center;
    position: relative;
    font-weight: 500;
    margin-bottom: 70px;
    font-size: 40px;
    line-height: normal;
}
.main-heading h2::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    border: 3px solid #1f2021;
    border-radius: 50%;
    top: 70px;
    left: 50%;
    transform: translateX(-50%);
    background-color:#fefbfc ;
}

.main-heading h2::before {
    content: "";
    width: 250px;
    height: 2px;
    position: absolute;
    background: #1f2021;
    top: 77px;
    left: 50%;
    transform: translateX(-50%);
}
.main-heading p {
    display: inline-block;
    max-width: 500px;
    color:rgb(31 32 33 / .5) ;
    margin: 0 0 100px;
    line-height: 2;
}


/* end global rules */
/* start heder */
header {
    position: absolute;
    left: 0;
    width: 100%;
    z-index: 2;
    
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

header .container::after {
    content: "";
    position: absolute;
    color: #636364;
    height: 1px;
    background-color: #a2a2a2;
    bottom: 0;
    width: calc(100% - 20px);
    left: 10px;
}

.imgCas {
    height: 40px;
}

nav {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

header nav .toggle-menu {
    color: white;
    font-size: 22px;
    margin-right: 20px;
}

@media (min-width: 768px) {
    header nav .toggle-menu {
        display: none;
    }
}

nav ul {
    display: flex;
    align-self: auto;
    
}

@media (max-width: 767px) {
    nav ul {
        display: none;
    }

    header nav .toggle-menu:hover+ul {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 10px;
        width: calc(100% - 20px);
        background-color: rgb(51 51 51 / .7);
    }
}

nav ul li a {
    display: flex;
    color: white;
    text-decoration: none;
    font-size: 14px;
    transition: 0.3s;
    padding: 40px 10px 40px 10px;
    position: relative;
    z-index: 2;
}

ul li a.active,
ul li a:hover {
    color: var(--main-color);
    border-bottom: 1px solid var(--main-color);

}

nav .form {
    width: 40px;
    height: 30px;
    position: relative;
    border-left: 1px solid white;
    margin-left: 10px;
}

nav .form i {
    color: white;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
}
/* end heder */
/* start landing */
.landing {
    min-height: 100vh;
    background-color: #1f2021;
    background-size:cover;
    background-image: url(../images/0000.jpg);
    background-repeat: no-repeat;
    position: relative;
    min-height: 750px;
}


.landing .overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(0 0 0 / 60%);
}
.landing .overlay .text {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 50%;
    padding: 50px;
    color: white;
    background-color:var(--transparent-color) ;
    display: flex;
    justify-content: flex-end;
}
@media (max-width : 767px) {
    .landing .overlay .text {
        width: 100%;
        justify-content:center;
    }
    .landing .overlay .content {
        width: 100%;
        
    }
}
@media ((min-width : 767px) and (max-width: 992px)  ) { 
    .landing .overlay .text {
        width: 80%;
        justify-content: flex-start;
        padding-left: 70px;
    }
    .landing .overlay .content {
        width: 80%;
    }
}
@media ((min-width: 992px) and (max-width: 1300px)) { 
    .landing .overlay .text { 
        width: 50%;
        padding-left: 2px;
    }
    .landing .overlay .content {
        width: 70%;
    }
}

.landing .overlay .content {
    max-width: 500px;
}
.landing .overlay .content h2 {
    font-size: 32px;
    font-weight: normal;
    line-height: 1.5;
    margin-bottom: 20px;
}
.landing .overlay .content p {
    font-size: 14px;
    line-height: 2;
}
.landing .change-background {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #ddd;
    font-size: 25px;
    cursor: pointer;
}
@media (max-width : 767px) {
    .landing .change-background { 
        display: none;
    }
}
.landing .right {
    left: 30px;

}
.landing .left {
    right:30px;
}
.landing .bullets  {
    display: flex;
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);


}
.landing .bullets li  {
    width: 15px;
    height: 15px;
    border: 3px solid #ddd;
    border-radius: 50%;
    margin: 5px;
}
.landing .bullets li.active {
    background-color: var(--main-color);
    border:3px solid var(--main-color) ;
}
/* end landing */
/*  start SERVICES */
.services {
    background-color: #fefbfc;
    padding-top: var(--section-padding);
    padding-bottom: var(--section-padding);
    max-width: 100%;
    
}
@media (min-width:767px) {
    .services .services-container {
        display: grid;
        grid-template-columns: repeat(auto-fill,minmax(450px,1fr)) ;
        row-gap: 40px;
        column-gap: 60px;
    }
}

.services .services-container .srv-box  {
    display: flex;
    
}
@media (max-width:767px) {
    .services .services-container .srv-box {
        flex-direction: column;
        text-align: center;
    }
    .services .services-container .srv-box i {
        margin: 30px 0;
    }
    .services .services-container .srv-box h2 {
        margin-bottom: 30px;
    }
}

.services .services-container .srv-box i{
    margin-right: 50px;


}
.services .services-container .srv-box h2{
    color: var(--main-color);
    margin-bottom: 10px;

}
.services .services-container .srv-box p{
    line-height: 2;
    color: rgb(31 32 33 / .5);
}

/*  end SERVICES */
/*  start design */
.design {
    padding-top: var(--section-padding);
    padding-bottom: var(--section-padding);
    height: 600px;
    background-image: url("../images/design-features.jpg");
    background-size: cover;
    display: flex;
    position: relative;
    justify-content: space-between;
    overflow: hidden;
}
@media (max-width:767px) {
    .design .Phone {
        display: none;
    }
}
.design::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(0 0 0 / 60%);
}
.design .design-info ,
.design .Phone {
    z-index: 2;
    flex: 1;
}
.design .design-info {
    color: white;
    padding: 50px;
    background-color: var(--transparent-color);
}
.design .Phone  {
    position: relative;
    bottom: -100px;
    left: 2%;
}
.design .design-info h2 {
    font-weight: normal;
    margin-bottom: 40px;
    
}
@media ((min-width:767px) and (max-width:870px)) {
    .design .design-info {
        padding:40px 0 40px 10px ;
    }
}
.design .design-info ul li {
    padding: 15px 0;
}

.design .design-info ul li::before {
    font-family: "Font Awesome 5 Free";
    content: '\f26c';
    margin-right: 20px;
    font-weight: 900;
}

/*  end design */
/* start portfolio */
.portfolio {
    background-color: white;
    padding-top: var(--section-padding);
    padding-bottom: var(--section-padding);
}

.menu {
    display: flex;
    justify-content: center;
}
.menu li {
    padding: 10px;
    margin: 20px;
    color: #777;
}
.menu li.active {
    background-color: var(--main-color);
    color: white;
 }
 
.portfolio .imgs-container {
    display: flex;
    flex-wrap: wrap;
    margin-top: 60px;
    justify-content: center;
}
.portfolio .imgs-container .box {
    flex-basis: calc(25% - 50px);
    margin: 25px;
    display: flex;
    flex-direction: column;

    position: relative;
    overflow: hidden;
    min-height: 220px
}
.portfolio .imgs-container .box img {
    max-width: 100%;
    min-height: 100%;
}
@media (max-width:991px) {
    .portfolio .imgs-container .box  {
        flex-basis: calc(100% / 2 - 50px);
    }
}
@media (max-width:767px) {
    .portfolio .imgs-container .box  {
        flex-basis: calc(100% / 2 - 50px) 
    }
}
@media (max-width: 576px) {
    .portfolio .imgs-container .box  {
        flex-basis: 100%; 
    }
    .menu li {
        margin: 0;
    }
}
.portfolio .imgs-container .box .caption{
    position: absolute;
    left: 0;
    padding: 20px 20px 10px;
    width: 100%;
    transition: .3s;
    bottom: -100px;
    background-color: white;
}
.portfolio .imgs-container .box .caption p {
    color: var(--main-color);
    margin: 10px 0 10px 10px;

}
.portfolio .imgs-container .box:hover .caption {
    bottom: 0px;
}
.portfolio .more {
    text-decoration: none;
    padding: 15px 10px;
    background-color: var(--main-color);
    display: block;
    margin: 30px auto;
    width: fit-content;
    color: white;
}
/* end portfolio */
/* start video */
.video {
    position: relative;
}
.video::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(0 0 0 / 40%);
}
.video video {
    width: 100%;
}
.video .text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background-color: var(--transparent-color);
    width: 100%;
    text-align: center;
    padding: 50px;
    color: white;
}
.video h2{ 
    margin-bottom: 30px;
    text-transform: uppercase;
    font-weight: normal;
}
.video p{
    margin-bottom: 50px;

}
.video button{
    background-color: black;
    border: none;
    padding: 10px;
    color: white;
    cursor: pointer;
    text-transform: uppercase;
}
/* end video */
/* start About */
.about {
    padding-top: var(--section-padding);
    overflow: hidden;
    text-align: center;
}
.about img{
    position: relative;
    bottom: -120px;
    left: -30px;
    max-width: 100%;
}
@media (max-width: 767px) {
    .about img{
        bottom: -60px;
        left: -15px;
    }
}
/* end About */
/* start stats */
.stats {
    padding-top: var(--section-padding);
    padding-bottom: var(--section-padding);
    text-align: center;
    background-image: url("../images/stats.png");
    background-size: cover;
    position: relative;
}
.stats::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(0 0 0 / 70%);
}
.stats .container {
    display: flex;
    position: relative;
    flex-wrap: wrap;
}
.stats .container .box {
    background-color: var(--transparent-color);
    z-index: 5;
    flex-basis: 25%;
    color: white;
    padding: 30px;
}
.stats .container .box h2{
    font-size: 50px;
    font-weight: bold;
    margin-bottom: 10px;
}
.stats .container .box p{
    margin-bottom: 20px;
}
.stats .container .box i {
    display: flex;
    justify-content: center;
    background: black;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    align-items: center;
    margin: 0 auto 20px;
    font-size: 20px;
}
@media (max-width:767px) {
    .stats .container .box {
        flex-basis: 85%;
        margin: auto;
    }
}
@media (min-width:768px) {
    .stats .container .box {
        flex-basis: 50% ;
    }
}
@media (min-width:992px) {
    .stats .container .box {
        flex-basis: 25% ;
    }
}

/* end stats */
/* start skill */

.skill {
    padding-top: var(--section-padding);
    padding-bottom: var(--section-padding);
}
.skill .container {
    display: flex;
    justify-content: space-between;
}

@media ((max-width: 991px) and (min-width: 767px)) {
    .skill .container > div {
        flex-basis: 45%;
    }
}   
@media (min-width: 991px) {
    .skill .container > div {
        flex-basis: 45%;
    }
}   
@media (max-width: 767px) {
    .skill .container > div {
        flex-basis: 95%;
    }
    .skill .container {
    justify-content: center;
    flex-wrap: wrap;
    }
}

.skill .container > div .title > h2 {
    position: relative;
    font-weight: normal;
    margin-bottom: 35px;
    font-size: 40px;
    line-height: normal;
    text-align: center;
}
.skill .container > div .title > p {
    display: block;
    max-width: 500px;
    color: rgb(31 32 33 / .5);
    line-height: 2;
    text-align: center;
    margin: auto;
}
.skill .container .our-skill .skill-content p {
    color: #262626;
    line-height: 2;
    font-weight: 500;
    font-size: 26px;
}
.skill .container .testimonials .post {
    display: flex;
    margin-bottom: 30px;
    height: 32%;
    align-items: center;

}
.skill .container .testimonials .post .text{
    display: flex;
    align-items: center;
    padding: 10px;
    line-height: 1.8;
    border-bottom: 1px solid #ccc;

} 
.skill .container .testimonials .post .text p{
    color: #777;
    font-size: 14px;
    margin-bottom: 10px;
} 
.skill .container .testimonials .post img{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin-right: 30px;
} 
.skill .container .testimonials  .imga{
    padding-top: 60px;
} 

@media (max-width: 767px) {
    .skill .container .testimonials .post {
        flex-direction: column;
        text-align: center;
        align-items: center;
        height: 38%;
    }
    .skill .container .testimonials {
        padding-bottom: 50px;
    }
    .skill .container .testimonials .post img{
        margin-bottom: 20px;
    }   
}
.skill .container .testimonials {
    position: relative;
}
.skill .container .testimonials .bullets  {
    display: flex;
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
}
@media (max-width: 767px) { 
    .skill .container .testimonials .bullets  { 
        bottom: 20px;
    }
}
.skill .container .testimonials .bullets li  {
    width: 15px;
    height: 15px;
    border: 3px solid #ddd;
    border-radius: 50%;
    margin: 5px;
}
.skill .container .testimonials .bullets li.active {
    background-color: var(--main-color);
    border:3px solid var(--main-color) ;
}

.skill .container .our-skill .skill-content{
    padding-top: 40px;
}
.skill .container .our-skill .skill-content .prog-holder{
    margin-bottom: 40px;
}
.skill .container .our-skill .skill-content .prog {
    height: 30px;
    background-color: #dbdbdb;
}
.skill .container .our-skill .skill-content .prog span{
    display: block;
    background-color: var(--main-color);
    height: 100%;
    position: relative;
}
.skill .container .our-skill .skill-content .prog span::after{
    content: attr(data-progres);
    position: absolute;
    top: -40px;
    background: black;
    width: 40px;
    padding: 4px 0;
    color: white;
    text-align: center;
    right: -19px;
    border-radius: 4px;
}
.skill .container .our-skill .skill-content .prog span::before{
    content: "";
    position: absolute;
    border-style: solid ; 
    border-width: 10px ; 
    border-color: black transparent transparent transparent ; 
    top: -17px;
    right: -9px;
}

/* end skill */
/* start quote */
.quote {
    padding-top: var(--section-padding);
    padding-bottom: var(--section-padding);
    background-image: url("../images/quote.jpg");
    background-size: cover;
    position: relative;
}
.quote::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(0 0 0 / 75%);
    z-index: 1;
}

.quote .container  {
    position: relative;
    z-index: 4;
}
.quote .container h2 {
    color: white;
    text-align: center;
    font-weight: normal;
    line-height: 2;
    position: relative;
}
.quote .container h2::before {
    position: relative;
    font-family: "Font Awesome 5 Free";
    content: "\f10d";
    font-weight: 900;
    bottom: 10px;
    right: 10px;
    padding: 10px;
    padding-right: 0;
}
.quote .container h2::after {
    position: relative;
    font-family: "Font Awesome 5 Free";
    content: "\f10e";
    font-weight: 900;
    left: 10px;
    bottom: 10px;
    padding: 10px;
    padding-left: 0;
}
.quote .container span {
    display: block;
    margin-top: 20px;
    color: white;
    text-align: center;

}
/* end quote */
/* start pricing */
.pricing {
    padding-top: var(--section-padding);
    padding-bottom: var(--section-padding);
}

.pricing .container .pricing-content{
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(250px,1fr));
    gap: 30px;
}
.pricing .container .pricing-content .tem-pricing {
    text-align: center;
    padding-bottom: 40px;
}
.pricing .container .pricing-content .tem-pricing .pricing-heading  {
    padding: 40px;
    border-top: 2px solid var(--main-color) ;
    border-bottom: 2px solid var(--main-color);
}
@media (max-width: 991px) {
    .pricing .container .pricing-content .tem-pricing .pricing-heading  {
        border-top: none;
    } 
}
.pricing .container .pricing-content .tem-pricing .pricing-heading p {
    font-size: 20px;
    margin-bottom: 20px;
    font-weight: normal;
}
.pricing .container .pricing-content .tem-pricing .pricing-heading h3{
    font-size: 60px;
    font-weight: normal;

}

.pricing .container .pricing-content .tem-pricing .pricing-heading span {
    position: relative;
}
.pricing .container .pricing-content .tem-pricing .pricing-heading span::after{
    content: "/MO";
    position: absolute;
    bottom: -60px;
    left: 45px;
    font-size: 20px;
    
}
.pricing .container .pricing-content .tem-pricing .pricing-heading span::before{
    content: "$";
    position: absolute;
    left: -58px;
    bottom: -25px;
    font-size: 25px;

}
.pricing .container .pricing-content .tem-pricing   ul {
    border-bottom: 2px solid var(--main-color);
}
.pricing .container .pricing-content .tem-pricing   ul li{
    padding: 20px;
    position: relative;

}
.pricing .container .pricing-content .tem-pricing   ul li:not(:last-child)::before{
    content: "";
    position: absolute;
    width: 120px;
    height: 1px;
    background-color: var(--main-color);
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
}
.pricing .container .pricing-content .tem-pricing .foot button{
    background-color: white;
    border: 1px solid var(--main-color);
    margin-top: 40px;
    padding: 10px 25px;
    cursor: pointer;
}
.pricing .container .contact-us{
    display: block;
    text-align: center;
    padding-top: var(--section-padding);
}
.pricing .container .contact-us p{
    font-weight: normal;
    font-size: 20px;
}
.pricing .container .contact-us button{
    background-color: var(--main-color);
    border: 1px solid var(--main-color);
    margin-top: 40px;
    padding: 10px 25px;
    cursor: pointer;
    color: white;
}

/* end pricing */
/* start Subscribe */
.subscribe  {
    padding-top: var(--section-padding);
    padding-bottom: var(--section-padding);
    background-image: url("../images/subscribe.jpg");
    background-size: cover;
    position: relative;
    color: white;

}
.subscribe::before  {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(0 0 0 / 50%);
}
.subscribe .container {
    display: flex;
    align-items: center;
    position: relative;
}
.subscribe .container form {
    display: flex;
    position: relative;
    width: 500px;
    max-width: 100%;
}
.subscribe .container form i{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 14px;
}
@media (max-width:991px) {
    .subscribe .container {
        flex-direction: column;
        text-align: center;
    }
    .subscribe .container p {
    margin-top: 30px;
    }
    .subscribe .container form {
        justify-content: center;
    }
    .subscribe .container form i {
        left: 24px;
    }
}
.subscribe .container form input[type= "email" ]{
    border: 1px solid white;
    background: none;
    border-right: none;
    padding: 20px 20px 20px 40px;
    caret-color: var(--main-color);
    width: calc(100% - 130px);
    color: white;
}
.subscribe .container form input[type= "email" ]:focus-visible,
.subscribe .container form input[type= "submit" ]:focus-visible{
outline: none;
}


.subscribe .container form input[type= "submit" ]{
    border: 1px solid white;
    border-left: none;
    color: white;
    padding: 0 10px 0 10px;
    background-color: var(--main-color);
    text-transform: uppercase;
}
.subscribe .container form ::placeholder{
    color: white;
}
@media (min-width:991px) {
    .subscribe .container p {
        width: 50%;
        }
}
.subscribe .container p{
    line-height: 1.8;
}
/* end Subscribe */
/* start Contact Us */
.contact {
    padding-top: var(--section-padding);
    padding-bottom: var(--section-padding);
    
}
.contact .container .content{
    display: flex;
    justify-content: space-between;
}
.contact .container .content form{
    flex-basis: 70%;
}
.contact .container .content form .main-input{
    padding: 20px;
    display: block;
    border: 1px solid #ccc;
    margin-bottom: 30px;
    width: 100%;
}
.contact .container .content form .main-input:focus-visible{
    outline: none;
}
.contact .container .content form  textarea.main-input{
    height: 200px;
}
.contact .container .content form  input[type="submit"]{
    background-color: var(--main-color);
    padding: 20px;
    color: white;
    display: flex;
    border: none;
    margin-left: auto;
    cursor: pointer;
}
.contact .container  .info-part {
    flex-basis: 25%;
}
.contact .container .info-part h4{
    margin-bottom: 30px;
    font-weight: 500;
    font-size: 18px;
}
.contact .container .info-part .phone{
    display: block;
    margin-bottom: 15px;
    color: #777;
}
.contact .container .info-part h4:nth-of-type(2){
    margin-top: 80px;
}
.contact .container .info-part address{
    color: #777;
    line-height: 2;
    font-style: normal;
}
@media (max-width: 767px) {
    .contact .container .content {
        flex-direction: column;
    }
    .contact .container  .info-part {
        text-align: center;
        margin-bottom: 60px;
        order: -1;
    }
    .contact .container .content form  input[type="submit"] {
        margin-right: auto;
    }
}
/* end Contact Us */
/* start footer*/
.footer {
    padding-top: calc(var(--section-padding) / 2);
    padding-bottom: calc(var(--section-padding) / 2);
    background-image: url("../images/subscribe.jpg");
    background-size: cover;
    position: relative;
    text-align: center;
    color: white;

}
.footer::before  {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(0 0 0 / 50%);
}
.footer .container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.footer .container p:first-of-type {
    padding: 20px 40px;
    border-bottom: 1px solid;
}
.footer .container .social-icon i{
    padding: 20px 10px;
}
.footer .container .copyright{
    margin-top: 30px;
    font-size: 23px;
}
.footer .container .copyright span{
    color: var(--main-color);
}

/* end footer*/