@font-face {
    font-family: 'Source Code Variable';
    src: url(fonts/SourceCodeVariable-Roman.otf);
}
*{
    margin: 0; padding: 0;
    font-family: 'Roboto', 'Poppins';
    box-sizing: border-box;
    outline: none; border: none;
    text-decoration: none;
}
:root{
    --background-color: #0b090a;
    --primary-color: #eee7b4;
    --white-color: #f9f9f9;
    --orange-color: #dd6536;
    --red-color: #ec1c24;
}
html{
    scroll-behavior: smooth;
    overflow-x: hidden;
    font-size: 100%;
    transition: all 0.8s ease-in-out;
}
.heading{
    display: block;
    font-size: 2.5rem;
    font-weight: 500;
    margin: 1.5rem auto;
    text-align: center;
}
::-webkit-scrollbar {
    width: 0.4rem;
}
::-webkit-scrollbar-track{
    border: none;
    border-radius: 0.1rem;
}
::-webkit-scrollbar-thumb {
    background: var(--background-color);
    border-radius: 0.1rem;
}


/* ------------------------- header ------------------------- */


.header{
    position: sticky;
    top: 0; left: 0;
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    padding: 0.6rem 0;
    background-color: var(--white-color);
    box-shadow: 0 0.1rem 0.8rem 0.1rem var(--background-color);
}
.header .logo{width: 8%;}
.header .logo img{width: 100%;}
.header h2{
    font-family: 'Source Code Variable';
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--orange-color);
}
.navbar{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem;
}
.navbar span{
    font-size: 1rem;
    background-color: rgba(60, 60, 60, 0.6);
    color: var(--primary-color);
    padding: 1.5rem;
    border-radius: 0.5rem;
}
.navbar button{
    padding: 0.5rem 1rem;
    font-size: 2rem;
    border-radius: 50%;
    background: linear-gradient(to top right, #404041, #989A9D, #FFFFFF, #929497, #58595B, #797A7C, #BBBDBF, #FFFFFF, #929497, #58595B, #D0D2D3);
    outline: 0.1rem solid var(--background-color);
    border: 0.2rem solid rgba(200, 200, 200, 0.5);
}

button:hover{
    cursor: pointer;
    color: var(--primary-color);
    border: 0.2rem solid var(--primary-color);
    box-shadow: 0 0 0.8rem 0.1rem var(--background-color);
}


/* ------------------------- popup ------------------------- */


.popup{
    display: none;
    position: fixed;
    justify-content: center;
    align-items: center;
    width: 20%;
    margin: 1rem auto;
    z-index: 100; left: 40%; top: 15%;
    transition: all 2s ease-in-out;
    border-radius: 1rem;
    box-shadow: 0 0 0.8rem 0.1rem var(--primary-color);
}
.popup .cop{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 2rem; padding: 2rem 0;
    align-items: center;
    border-radius: 1rem;
    background-color: var(--background-color);
}
.popup .cop .close{
    display: flex;
    align-self: flex-end;
    margin: 0 2rem;
}
.popup .cop .close .close-btn{
    font-size: 2rem;
    line-height: 1rem;
    padding: 0.5rem;
    border-radius: 50%;
    background-color: transparent;
    color: var(--white-color);
}
.popup .cop #copdisp{
    font-size: 1rem;
    background-color: rgba(60, 60, 60, 0.6);
    color: var(--primary-color);
    padding: 2rem;
    border-radius: 0.5rem;
}
.popup .cop .copLogo{width: 50%;}
.popup .cop .btns{
    display: block;
    width: 50%;
    margin: 0 auto;
    text-align: center;
}
.popup .cop .btns button{
    font-size: 1.2rem;
    line-height: 1rem;
    margin: 1rem; padding: 1.2rem;
    border: 0.2rem solid var(--background-color);
    border-radius: 50%;
    background: linear-gradient(to top right, #404041, #989A9D, #FFFFFF, #929497, #58595B, #797A7C, #BBBDBF, #FFFFFF, #929497, #58595B, #D0D2D3);
    color: var(--white-color);
    outline: 0.1rem solid var(--white-color);
}
.popup .cop .btns button:hover{
    color: var(--primary-color);
    border: 0.2rem solid var(--primary-color);
    box-shadow: 0 0 0.8rem 0.1rem var(--primary-color);
}


/* ------------------------- home ------------------------- */


.home{
    width: 100%; height: 100vh;
    background: url('images/bgimage.gif');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    color: var(--primary-color);
}
.home .container{
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    width: 50%;
    margin: 0 3rem;
    padding: 2rem;
    align-items: center;
    position: relative;
    top: 20%;
}
.home .container h1{font-size: 2.5rem; font-weight: 400;}
.home .container p{
    font-size: 1.3rem;
    text-align: justify; 
    line-height: 1.6rem;
    width: 80%;
    font-weight: 400;
}
.home h1 span{
    color: var(--red-color);
    text-shadow: 0.1rem 0.1rem var(--white-color);
}
.home .container a{
    padding: 1rem 3rem;
    font-size: 1.4rem;
    border-radius: 0.5rem;
    color: var(--primary-color);
    background-color: var(--background-color);
    box-shadow: 0 0 2rem 0.2rem var(--primary-color);
    cursor: pointer;
    text-transform: uppercase;
}


/* ------------------------- services ------------------------- */


.services{padding-top: 3rem;}
.services .container{
    width: 80%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 2rem;
    justify-content: center;
    margin: 0 auto;
    padding: 2rem;
    text-align: center;
    color: var(--background-color);
}
.services .container .box{
    width: 100%;
    padding: 2rem;
    border-radius: 0.5rem;
    color: var(--background-color);
    box-shadow: 0 0 1.5rem 0.1rem var(--background-color);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5rem;
}
.services .container .box .info{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    text-align: justify;
    width: 60%; gap: 1rem;
}
.services .container .box img{
    width: 30%;
    border: 0.2rem solid var(--background-color);
    border-radius: 0.5rem; 
}
.services .container .box .info h2{font-size: 1.6rem; font-weight: 600;}
.services .container .box .info p{font-size: 1.2rem;}
.services .container span{font-size: 1.6rem;}
.services .container a{
    width: 40%; margin: 0 auto;
    padding: 1rem 3rem;
    font-size: 1.4rem;
    border-radius: 0.5rem;
    color: var(--primary-color);
    background-color: var(--background-color);
    cursor: pointer;
    text-transform: uppercase;
}
.services .feedback{display: flex;}
.services .feedback h2{font-weight: 500;}


/* ------------------------- gallery ------------------------- */


.gallery{padding-top: 3rem;}
.gallery .container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 2rem 0;
}
.gallery .container .box{
    display: flex;
    width: 95%; gap: 1rem;
    justify-content: space-between;
}
  
.gallery .container .box .dream{
    display: flex;
    flex-direction: column;
    width: 32.5%; gap: 1.2rem;
}
  
.gallery .container .box .dream img{
    width: 100%;
    border-radius: 0.5rem;
}


/* ------------------------- about ------------------------- */


.about{
    width: 100%;
    background: url('images/bgimage.gif');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    color: var(--white-color);
    padding-top: 5rem;
}
.about .container{
    display: flex;
    flex-direction: column;
    width: 60%; gap: 1rem;
    margin: 0 auto;
    justify-content: center;
    align-items: center;
    text-align: justify;
}
.about .logo{
    width: 50%; 
    background: rgba(60, 60, 60, 0.5);
    padding: 1rem;
    border-radius: 0.5rem;
}
.about .strg{font-size: 1.4rem;}
.about .box-container{
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem; padding-bottom: 1.5rem;
    justify-content: center;
}
.about .box-container .box{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 0.5rem;
    color: var(--white-color);
    background-color: var(--background-color);
    padding: 2rem;
    font-size: 1.3rem;
    border-radius: 0.5rem;
    box-shadow: 0 0 1rem 0.2rem var(--white-color);
    align-items: center;
    justify-content: center;
}
.about .box-container .box p{text-align: center;}
.about .box-container .box a{color: var(--primary-color);}


/* ------------------------- clients ------------------------- */


.clients{
    padding-top: 5rem;
    background-color: var(--background-color);
    color: var(--white-color);
}
.clients .container{
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-around;
    align-items: center;
}
.clients .container .box{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    list-style: none;
    text-align: center;
    font-size: 1.4rem;
    color: var(--primary-color);
    border-radius: 0.5rem;
    padding: 2rem; gap: 0.3rem;
}
.clients .container .box span{color: var(--white-color);}
.clients .container .box span::before{content: " ";}


/* ------------------------- contact ------------------------- */


.contact{
    padding: 2rem 0;
    color: var(--white-color);
    background-color: var(--background-color);
}
.contact .container{
    display: flex;
    flex-wrap: wrap;
    gap: 1rem; width: 80%;
    justify-content: space-around;
    align-items: center;
    margin: 2rem auto;
    padding: 2rem;
}
.contact .form-box{
    width: 40%;
}
.contact .form-box form{
    width: 100%;
    padding: 1.5rem;
    border-radius: 0.5rem;
    background-color: rgba(60, 60, 60, 0.5);
    box-shadow: 0 0 1.5rem 0.1rem var(--primary-color);
}
.contact .form-box form .box{
    width: 100%;
    color: var(--primary-color);
    background: transparent;
    border: 0.1rem solid var(--primary-color);
    border-radius: 0.5rem;
    font-size: 1rem;
    padding: 0.8rem 1rem;
    margin: 0.8rem 0;
    resize: none;
}
.contact .form-box form .box:hover{box-shadow: 0 0 1rem 0.1rem var(--primary-color);}
.contact form .box::placeholder{color: var(--primary-color);}
.contact form .contact-btn{
    width: 100%;
    font-size: 1.3rem;
    padding: 1rem 0; margin: 1rem 0;
    border: none;
    cursor: pointer;
    text-transform: uppercase;
    border-radius: 0.5rem;
    color: var(--background-color);
    background-color: var(--primary-color);
}

.contact .contact-info{width: 40%;}
.contact .contact-info .box{
    display: flex; 
    flex-direction: column;
    gap: 1rem; padding: 2rem 0;
    margin: 4rem 0; width: 100%;
    justify-content: space-around;
    align-items: center;
    text-align: center;
    box-shadow: 0 0 1.5rem 0.1rem var(--blue-color);
    border-radius: 0.5rem;
}
.contact .contact-info .box .info{
    width: 90%;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
}
.contact .contact-info .info span{font-size: 1.6rem;}
.contact .contact-info .info i{margin-right: 0.6rem;}
.contact .contact-info .info .fa-phone{transform: rotate(90deg);}
.contact .contact-info .box .logo{width: 40%;}
.contact .contact-info .box p{text-align: center; font-size: 1.2rem;}


/* ------------------------- footer ------------------------- */


.footer{
    display: flex;
    flex-wrap: wrap;
    width: 100%; gap: 10%;
    align-items: center;
    justify-content: space-around;
    padding: 0.5rem; clear: both;
    color: var(--background-color);
    background-color: var(--primary-color);
}
.footer span{font-size: 1.4rem; font-weight: 400;}
.footer img{width: 100%;}
.footer a{width: 5%; color: inherit;}


/* ------------------------- media query ------------------------- */


@media (max-width: 990px){
    html{font-size: 80%}
    .header .logo{width: 15%;}
    .popup{width: 45%; left: 30%; top: 25%;}
    .home .container{width: 80%;}
    .services .container, .about .container{width: 90%;}
    .services .container .box{gap: 1rem;}
    .services .container .box img{width: 60%;}
    .services .container .box .info{width: 100%; align-items: center;}
    .gallery .container .box{width: 90%;}
    .about .container a{width: 90%;}
    .about .logo{width: 60%;}
    .contact .form-box{width: 100%;}
    .contact .contact-info{width: 100%;}
    .contact .contact-info .box{width: 100%;}
    .footer a{width: 8%;}
}
@media (max-width: 450px){
    html{font-size: 65%;}
    .header .logo{width: 18%;}
    .header h2{font-size: 1rem;}
    .popup{width: 70%; left: 15%; top: 25%;}
    .home .container{width: 90%;}
    .home .container h1{font-size: 2.3rem;}
    .services .container .box img{width: 80%;}
    .services .container a{width: 80%;}
    .gallery .container .box{flex-wrap: wrap; justify-content: space-around;}
    .gallery .container .box .dream{width: 48%;}
    .gallery .container .box .dream:last-child{width: 100%;}
    .about .container{width: 90%;}
    .about .logo{width: 70%;}
    .about .strg{font-size: 1.1rem;}
    .contact .container{width: 100%;}
    .contact .form-box{width: 90%;}
    .contact .contact-info{width: 90%;}
    .footer a{width: 10%;}
    .footer span{font-size: 1.2rem;}
}