:root {



    --dark: #19283f;

    --green: #33d1cc;

    --section: #eff7fa;



}





/*Fonts*/

@font-face {

    font-family: 'icomoon';

    src: url("../fonts/icomoon/icomoon.eot?srf3rx");

    src: url("../fonts/icomoon/icomoon.eot?srf3rx#iefix") format("embedded-opentype"), url("../fonts/icomoon/icomoon.ttf?srf3rx") format("truetype"), url("../fonts/icomoon/icomoon.woff?srf3rx") format("woff"), url("../fonts/icomoon/icomoon.svg?srf3rx#icomoon") format("svg");

    font-weight: normal;

    font-style: normal;

}



@font-face {

    font-family: 'tirhal';

    src: url("../fonts/TajawalBold.ttf");

    font-weight: normal;

    font-style: normal;

}





body {



    font-family: tajawal;



}



input,
textarea {

    outline: none;

    box-shadow: none !important;



}

a,
a:hover,
a:focus {



    text-decoration: none;

    color: white;

}



.main-title::after {



    content: '';

    width: 120px;

    height: 2px;

    background-color: var(--green);

    position: absolute;

    bottom: -30px;

    left: 50%;

    transform: translateX(-50%);





}



.main-title .back {



    position: absolute;

    top: 0;

    bottom: 0;

}



/* Start Navbar */



.navbar {



    background-color: var(--dark);



}



.navbar .navbar-nav .nav-link {



    color: white;

}



.navbar .navbar-nav .nav-link.active,

.navbar .navbar-nav .nav-link:focus,

.navbar .navbar-nav .nav-link:hover {



    color: var(--green)
}





.navbar .navbar-toggler {



    color: white;

    border-color: white
}



.navbar .navbar-toggler:focus {



    box-shadow: none;

}



/* End Navbar */



/* Start landing */



.header {



    background-color: var(--dark);

    min-height: calc(100vh - 72px);



}



.header svg {



    margin-top: 100px;

    border: 1px solid var(--green);

    padding: 5px;

    border-radius: 50%;

    width: 20px;

    height: 20px;

    transition: all .3s;



}



.header svg:hover {



    cursor: pointer;

    background-color: var(--green);

    border: 1px solid var(--green);

}





/* End landing */



/* ----------------------- INDEX PAGE ----------------------- */



/* Start About */



.about {



    background-color: #19283f14;



}



.about .name {



    color: var(--green);

}



.about .me h4 {



    background-color: var(--green);



}



.about .me img {



    height: 300px;

    width: 300px;



}



.about .box .hairMe {



    background-color: transparent;

    border: 1px solid var(--dark) !important;

    color: var(--dark);

    padding: 10px;



}



.about .box .hairMe:hover {



    background-color: var(--green);

    border-color: var(--green) !important;

    color: white;

}

.about .box .hairMe:hover>span {
    transition: all .3s;
}



.about .box .hairMe svg {



    opacity: 1;

}



.about .box .hairMe:hover>span {



    margin-right: 1 0px;

}



/* End About */



.badge {



    display: inline-block;

    padding: .35em .65em;

    font-size: .75em;

    font-weight: 700;

    line-height: 1;

    color: #fff;

    text-align: center;

    white-space: nowrap;

    vertical-align: baseline;

    border-radius: .25rem;

    background-color: var(--dark) !important;

}





.progress-bar {

    display: flex;

    flex-direction: column;

    justify-content: center;

    overflow: hidden;

    color: #fff;

    text-align: center;

    white-space: nowrap;

    background-color: var(--green);

    transition: width .6s ease;

}





/* Start Contact */





.contact {



    background-color: var(--section);



}



.contact #submit-btn {



    background-color: transparent;

    border: 1px solid var(--green) !important;

    color: white;

    padding: 10px;

    background-color: var(--green);

    transition: all .3s;



}





.contact .socialMedia svg {
    transition: all .3s;
    cursor: pointer;
}



.contact .socialMedia svg:hover {



    color: #dc3545
}



/* End Contact */



/* start footer */



.footer {



    background-color: var(--dark);

}



.footer h3 {



    color: var(--green);



}



.footer #line {
    margin-top: 40px;
    opacity: 20%
}

.footer #rights {
    margin-top: 40px;
}

.footer #rights .logo img {
    margin-top: 30px;
}



.footer #rights a {
    transition: all .3s;
}

.footer #rights a:hover {
    color: var(--green);
}



.heart {



    color: red
}



/* end footer */



/* TO TOP BOTTON */





#toTop {



    position: fixed;

    top: 90vh;

    right: 25px;

    height: 40px;

    width: 50px;

    text-align: center;

    color: var(--green);

    padding: 8px 8px;

    border-radius: 40% !important;

    cursor: pointer;

    z-index: 9999;

    display: none;



}





/* TO TOP BOTTON */







/* ----------------------- INDEX PAGE ----------------------- */







/* ----------------------- DESIGN PAGE ----------------------- */



.design .box,

.pop .box,

.smPoster .box {



    background-color: white;

    border: 1px dashed var(--dark);

    transition: all .2s;

    cursor: pointer;

    width: 100%;

    height: 100%;

    overflow: hidden;

    transition: all .2s ease-in-out;

    position: relative;



}



.design .box img,

.pop .box img,

.smPoster .box img {



    width: 100%;

    height: 100%;

    aspect-ratio: 3/2 !important;

    object-fit: contain !important;

    transition: all .2s ease-in-out;



}



.design .box:hover img,

.pop .box:hover img,

.smPoster .box:hover img {





    /* transform: scale(1.2); */

    padding: 0 !important;

}





.pop .box svg {

    display: flex;

    justify-content: center;

    align-items: center;



}





.design .box::after,

.pop .box::after,

.smPoster .box::after {



    content: "";

    position: absolute;

    background-color: #33d1ccd0;

    left: 0;

    top: 0;

    width: 0;

    height: 100%;

    transition: all .2s ease-in-out;

}



.design .box:hover:after,

.pop .box:hover:after,

.smPoster .box:hover:after {



    width: 0%;



}



.design .btn,

.pop .btn,

.smPoster .btn {



    border: 1px solid #19283f;

    transition: all .3s;



}



.design .btn:hover,

.pop .btn:hover,

.smPoster .btn:hover {



    background-color: #19283f;

    color: white;



}







/* ----------------------- DESIGN PAGE ----------------------- */











.modal-content {



    position: relative;

    display: flex;

    flex-direction: column;

    width: 100%;

    pointer-events: auto;

    background-color: transparent;

    background-clip: padding-box;

    border: none;

    border-radius: .3rem;

    outline: 0;



}









/* MEDIA QUERY */





/*Smartphones and tablets screen*/

@media (max-width: 767px) {



    #toTop {



        display: none !important;

    }



    .contact .box {



        text-align: center;

    }



    .contact .socialMedia {



        justify-content: center;

        align-items: center;

        margin-bottom: 50px;

    }





}

/*Small screen*/

@media (min-width: 768px) and (max-width: 991px) {}

/*Medium screen*/

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

/*larg screen*/

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





/* MEDIA QUERY */