/*  
    Name   : Nabil Zaher;
    website: www.viont.com;
    Email  : nabil@pfnd.net;
    Date   : 23/05/2023;
*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800&display=swap');

:root{
    --primart-color:#ff5757;
    --second-color:#3e454f;
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html{
    scroll-behavior: smooth;
}
body {
    font-family: 'Poppins', sans-serif;
    color: var(--second-color);
    overflow-x: hidden;
}
::selection{
    background-color: var(--second-color);
    color: var(--primart-color);
}

.container{
    margin: 0 auto;
    padding: 0 15px;
    width: 80%;
}
.animation-smooth{
    cursor: pointer;
    transition: .5s;
}
.animation-up-down,
.animation-pulse{
    animation-name: up-down;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-direction: alternate;
}
@keyframes up-down{
    to{
        transform: translateY(25px);
    }
}
.animation-pulse{
    animation-name: pulse;
    animation-duration: 1.1s;
}
@keyframes pulse{
    to{
        transform: scale(1.5)
    }
}

/* Start Header */
header{
    height: 150px;
}
header .container{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.logo-text h1{
    color: var(--primart-color);
    margin: 3px;
    font-size: 25px;
    word-spacing: 6px;
}
.logo-text span{
    color: var(--second-color);
    letter-spacing: 1px;
}

.links{
    position: relative;
    top: -25px;
}
.links .list{
    font-size: 40px;
    position: absolute;
    right: 0;
    top: 0;
}
.links .list ion-icon:hover{
    color: var(--primart-color);
    animation-play-state: paused;
}
.links ul{
    position: absolute;
    top: 48px;
    right: 0;
    list-style: none;
    background-color: var(--second-color);
    padding: 15px;
    width: 180px;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
    display: none;
}
.links:hover ul{
    display: block;
    z-index: 1111;
}
.links ul::before{
    content: '';
    position: absolute;
    right: 10px;
    top: -20px;
    border-width: 10px;
    border-style: solid;
    border-color: transparent transparent  var(--second-color) transparent;
}
.links ul li{
    padding: 8px 0;
}
.links ul li a{
    display: block;
    text-decoration: none;
    color: #FFF;
}
.links ul li a:hover{
    color: var(--primart-color);
    padding-left: 10px;
}
/* End Header */

/* Start Landing */
.landing{
    position: relative;
    width: 100%;
    height: calc(100vh - 150px);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    z-index: 1000;
}
.landing .help-email{
    background-color: var(--primart-color);
    width: 200px;
    position: fixed;
    left: -150px;
    z-index: 1001;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding:5px;
    color: #FFF;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}
.help-email .icon{
    font-size: 40px;
    padding-right: 5px;
}
.landing .help-email:hover{
    left:0
}
.landing .intro{
    width: 55%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: absolute;
    z-index: 1000;
    color: #FFF;
}
.landing .intro h2{
    color: var(--primart-color);
    font-size: 75px;
    word-spacing: 10px;
    padding-bottom: 10px;
}
.landing .intro p{
    text-align: justify;
    line-height: 1.8;
    font-size: 20px;
}
.over{
    background-color: #000;
    opacity: .7;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
.landing .img-landing{
    position: absolute;
    background-image: url("../images/landing1.jpg");
    background-size: cover;
    background-position: center center;
    width: 100%;
    height: 100%;
    z-index: -1;
}
.circle .item{
    position: absolute;
    color: #ffffff77;
    z-index: 0;
    font-size: 200px;
    animation-duration: 3s;
}
.circle .item:nth-of-type(1){
    top: 0;
    right: 0;
}
.circle .item:nth-of-type(2){
    top:150px;
    right: 150px;
    animation-delay: 1s;
}
.circle .item:nth-of-type(3){
    bottom: 0;
    left: 0;
    animation-delay: 2s;
}
.circle .item:nth-of-type(4){
    bottom: 0;
    right: 0;
    animation-delay: 3s;
}
.circle .item:nth-of-type(5){
    top: 50%;
    right: 50%;
    animation-delay: 4s;
}
.circle .item:nth-of-type(6){
    top: 0;
    left: 0;
    animation-delay: 5s;
}
/* End Landing */

/* Start About-us */
.about-us .container{
    padding: 50px 0;
}
.grid-about-us{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-template-rows: repeat(3,auto);
    gap: 20px;
}
.grid-about-us .title{
    grid-column: span 3;
    font-size: 60px;
    text-align: center;
    font-weight: bold;
}
.grid-about-us .content{
    grid-column: span 2;
    grid-row: span 2;
    font-size: 20px;
    text-align: justify;
    line-height: 1.8;
}
.grid-about-us .image{
    grid-column: span 1;
    grid-row: span 2;
    display: flex;
    justify-content: flex-end;
}
.grid-about-us .image img{
    width: 350px;
}
.grid-about-us .contact{
    grid-column: span 3;
    font-weight: bold;
    font-size: 20px;
    color: var(--primart-color);
}
.grid-about-us .contact p{
    margin-bottom: 10px;
}
.contact button{
    background-color: var(--primart-color);
    min-width: 220px;
    color: #FFF;
    padding: 20px;
    border: none;
    outline: none;
    margin: 10px;
}
.grid-about-us .contact button:hover{
    background-color: var(--second-color);
}
/* End About-us */

/* Start services */
.services{
    background-color: #EEE;
    height: 100vh;
    position: relative;
    z-index: 0;
}
.bk-services img{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 450px;
    z-index: 1;
}
.tree-services img{
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100%;
    opacity: .3;
    z-index: -1;
    filter: saturate(0);
}
.services .container{
    padding: 50px 0; 
}
.grid-services{
    display: grid;
    grid-template-columns: repeat(4,auto);
    grid-template-rows: repeat(3,auto);
    gap: 20px;
}
.grid-services .title{
    grid-column: span 4;
    font-size: 60px;
    text-align: center;
    font-weight: bold;
}
.grid-services .services-Group{
    display: grid;
    grid-template-columns: repeat(4,auto);
    grid-column: span 4;
    gap: 10px;
}
.grid-services .services-Group .item{
    text-align: center;
    justify-content: center;
    min-width: calc(100% / 4);
}
.grid-services .services-Group .item .icon{
    font-size: 60px;
    color: var(--primart-color);
    margin-bottom: 30px;
}
.grid-services .services-Group .item h3{
    min-height: 50px;
}
.grid-services .services-Group .item p{
    text-align: left;
    width: 90%;
    margin: 0 auto;
    line-height: 1.8;
    font-size: 20px;
}
.grid-services .contact{
    grid-column: span 4;
    text-align: center;
    margin-top: 30px;
    font-weight: bold;
    font-size: 20px;
    color: var(--primart-color);
}
button:hover{
    background-color: var(--second-color);
}
/* End services */

/* Start hosting-plans */
.hosting-plans{
    /* Error section contact-us */
    /* height: 100vh; */
    width: 100%;
}
.hosting-plans .container{
    padding: 50px 0;
}
.hosting-plans .container .title{
    font-size: 60px;
    text-align: center;
    font-weight: bold;
    margin-bottom: 50px;
}
.grid-plan{
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(350px,1fr));
    justify-content: center;
    align-items: center;
    gap: 20px;
}
.grid-plan .item{
    position: relative;
    text-align: center;
    padding: 10px;
    border:1px solid #EEE;
}
.grid-plan .item:nth-of-type(2)::before{
    content: 'Most popular';
    position: absolute;
    width: 200px;
    padding: 10px;
    background-color: var(--second-color);
    border-radius: 20px;
    color: #FFF;
    font-weight: bold;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
}
.grid-plan .item:nth-of-type(2)::after{
    content: '';
    position: absolute;
    border-color: var(--second-color) transparent transparent transparent;
    border-width: 12px;
    border-style: solid;
    top:15px;
    left: 50%;
    transform: translateX(-50%);
}
.grid-plan .item:hover{
    transform: scale(1.02);
}
.grid-plan .item h2{
    margin: 30px 0 5px 0;
    color: var(--primart-color);
}
.grid-plan .item p{
    margin-bottom: 20px;
}
.grid-plan .item span{
    font-size: 20px;
}
.grid-plan .item span.new-price{
    background-color: #ff5757;
    padding: 10px;
    border-radius: 30px;
    font-weight: bold;
    color: #FFF;
}
.grid-plan .item hr{
    border-color: #EEE;
    width: 250px;
    margin: 25px auto;
}
.grid-plan .item ul{
    text-align: left;
    list-style: none;
}
.grid-plan .item ul h4{
    margin: 20px 0;
}
.grid-plan .item ul li{
    line-height: 2.3;
}
.grid-plan .item ul li ion-icon{
    padding-right: 10px;
}
.grid-plan .item ul li.red{
    color: var(--primart-color);
}
del{
    color: #DDD;
}
/* End hosting-plans */

/* Start Contact-us */
.contact-us{
    background-color: #EEE;
    height: 100vh;
    background-image: url("../images/flag.webp");
}
.contact-us .container{
    padding: 50px 0; 
}
.contact-us .title{
    font-size: 60px;
    text-align: center;
    font-weight: bold;
    margin-bottom: 50px;
}
.contact-us .grid-contact-us{
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(350px,1fr));
    gap: 20px;
    justify-content: space-between;
    align-items: center;
}
.contact-us .grid-contact-us .item:nth-of-type(2){
    display: flex;
    justify-content: flex-end;
}
.contact-us .grid-contact-us .item img{
    width: 80%;
}
.contact-us .grid-contact-us .post{
    background-color: #ffffff63;
    padding: 20px;
    border-radius: 10px;
    /* box-shadow: 1px 1px 25px var(--second-color); */
}
.contact-us .grid-contact-us .post h2{
    color: var(--primart-color);
    margin-bottom: 20px;
}
.contact-us .grid-contact-us .post ul{
    font-size: 20px;
    list-style: none;
}
.contact-us .grid-contact-us .post ul h4{
    margin: 10px 0;
}
.contact-us .grid-contact-us .post ul li{
    line-height: 2;
}
.contact-us .grid-contact-us .post ul li ion-icon{
    padding-right: 10px;
    font-size: 25px;
}
/* End Contact-us */

/* Start Footer */
footer{
    background-color: var(--second-color);
    color: #FFF;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 50px 0;
}
footer .copy span{
    display: block;
    text-align: center;
}
footer .copy span a{
    font-size: 30px;
    color: var(--primart-color);
    margin-top: 10px;
    display: inline-block;
    background-color: #FFF;
    padding: 7px 5px 0 5px;
    margin-left: 5px;
    border-radius: 50px;
    position: relative;
}
footer .copy span a:hover{
    color: var(--second-color);
}
/* End Footer */



/* Start Media-screen */
@media (max-width:775px){
    header{
        height: 100px;
    }
    .container{
        width: 100%;
    }
    .logo img{
        width: 80px;
        animation-play-state: paused;
    }
    .logo-text h1{
        font-size: 18px;
        word-spacing: 3px;
    }
    .logo-text span{
        font-size: 11px;
    }

    .landing{
        height: calc(100vh - 100px);
    }
    .landing .intro h2{
        font-size: 22px;
    }
    .landing .intro p{
        line-height: 1.4;
        font-size: 18px;
    }
    .circle .item{
        display: none;
    }

    .grid-about-us{
        width: 90%;
        margin: 0 auto;
    }
    .grid-about-us .title{
        font-size: 50px;
    }
    .grid-about-us .content{
        grid-column: span 3;
        line-height: 1.4;
    }
    .grid-about-us .image{
        grid-column: span 3;
        display: flex;
        justify-content: center;
    }
    .grid-about-us .image img{
        width: 300px;
    }
    .grid-about-us .contact{
        grid-column: span 3;
        font-size: 16px;
        text-align: center;
    }
    .grid-about-us .contact p{
        margin-bottom: 5px;
    }
    .grid-about-us .contact button{
        min-width: 150px;
        padding: 10px;
        margin: 5px;
    }

    .bk-services img{
        display: none;
    }
    .grid-services{
        grid-template-columns: repeat(2,auto);
    }
    .grid-services .title{
        grid-column: span 2;
        font-size: 60px;
        text-align: center;
        font-weight: bold;
    }
    .grid-services .services-Group{
        display: grid;
        grid-template-columns: repeat(2,auto);
        grid-column: span 2;
    }
    .grid-services .services-Group .item{
        min-width: calc(100% / 2);
    }
    .grid-services .services-Group .item .icon{
        font-size: 40px;
        margin-bottom: 10px;
    }
    .grid-services .services-Group .item h3{
        min-height: 30px;
    }
    .grid-services .services-Group .item p{
        line-height: 1.5;
        font-size: 14px;
    }
    .grid-services .contact{
        grid-column: span 2;
        margin-top: 10px;
        font-size: 16px;
    }
    .grid-services .contact button{
        min-width: 150px;
        padding: 10px;
        margin: 5px;
    }

    .hosting-plans .container{
       width: 90%;
    }
    .grid-plan .item{
        margin: 15px 0;
    }
    .grid-plan .item:hover{
        transform: scale(1);
    }

    .contact-us .container{
        width: 90%; 
    }
    .contact-us .title{
        margin-bottom: 30px;
    }
    .contact-us .grid-contact-us .item img{
        display: none;
    }
    .contact-us .grid-contact-us .post{
        width: 90%;
    }


}
@media (min-width:776px) and (max-width:1300px){
    .bk-services img{
        display: none;
    }
    .grid-services{
        grid-template-columns: repeat(2,auto);
    }
    .grid-services .title{
        grid-column: span 2;
        font-size: 60px;
        text-align: center;
        font-weight: bold;
    }
    .grid-services .services-Group{
        display: grid;
        grid-template-columns: repeat(2,auto);
        grid-column: span 2;
    }
    .grid-services .services-Group .item{
        min-width: calc(100% / 2);
    }
    .grid-services .services-Group .item .icon{
        font-size: 40px;
        margin-bottom: 10px;
    }
    .grid-services .services-Group .item h3{
        min-height: 30px;
    }
    .grid-services .services-Group .item p{
        line-height: 1.5;
        font-size: 14px;
    }
    .grid-services .contact{
        grid-column: span 2;
        margin-top: 10px;
        font-size: 16px;
    }
    .grid-services .contact button{
        min-width: 150px;
        padding: 10px;
        margin: 5px;
    }

    .grid-plan .item{
        margin: 15px 0;
    }

    .contact-us .title{
        margin-bottom: 30px;
    }
    .contact-us .grid-contact-us .item img{
        width: 250px;
        animation: none;
    }
}
@media (min-width:991px){

}
@media (min-width:1199px){

}
/* End Media-screen */