/*=========================================
    DESIGNS BY DRE
    STYLE SHEET
=========================================*/

/*=========================================
RESET
=========================================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

/*=========================================
BODY
=========================================*/

body{

    background-color:#F7F4EF;

    color:#1F1F1F;

    font-family:"Open Sans", sans-serif;

    line-height:1.6;

}

/*=========================================
HEADINGS
=========================================*/

h1,
h2,
h3{

    font-family:"Taviraj", serif;

    margin-bottom:20px;

}

h1{

    font-size:60px;

}

h2{

    font-size:38px;

}

h3{

    font-size:24px;

}

p{

    margin-bottom:20px;

}

/*=========================================
IMAGES
=========================================*/

img{

    max-width:100%;

    height:auto;

    display:block;

}

/*=========================================
LINKS
=========================================*/

a{

    text-decoration:none;

    color:#1F1F1F;

}

/*=========================================
LISTS
=========================================*/

ul{

    list-style:none;

}

/*=========================================
BUTTONS
=========================================*/

.btn{

    display:inline-block;

    background-color:#1F1F1F;

    color:#FFFFFF;

    padding:15px 30px;

    margin-top:20px;

    border-radius:5px;

    transition:background-color 0.3s;

}

.btn:hover{

    background-color:#8C7058;

}

.btn-secondary{

    display:inline-block;

    border:2px solid #1F1F1F;

    color:#1F1F1F;

    padding:15px 30px;

    margin-top:20px;

    border-radius:5px;

    transition:background-color 0.3s;

}

.btn-secondary:hover{

    background-color:#1F1F1F;

    color:#FFFFFF;

}

/*=========================================
HEADER
=========================================*/

header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:25px 8%;

    background-color:#FFFFFF;

}

.logo img{

    width:170px;

}

nav ul{

    display:flex;

    gap:30px;

}

nav a{

    font-weight:bold;

    transition:color 0.3s;

}

nav a:hover{

    color:#8C7058;

}

.active{

    color:#8C7058;

}

/*=========================================
HERO SECTION
=========================================*/

#hero{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:80px 8%;

    gap:50px;

}

.hero-content{

    flex:1;

}

.hero-content h3{

    color:#8C7058;

}

.hero-content p{

    margin-bottom:25px;

}

.hero-image{

    flex:1;

}

.hero-image img{

    border-radius:10px;

}

/*=========================================
PAGE BANNER
=========================================*/

.page-banner{

    text-align:center;

    background-color:#DDD2C4;

    padding:80px 8%;

}

.page-banner p{

    max-width:700px;

    margin:0 auto;

}

/*=========================================
ABOUT SECTION
=========================================*/

#about-home,
#about-page{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:50px;

    padding:80px 8%;

}

.about-image{

    flex:1;

}

.about-image img{

    border-radius:10px;

}

.about-text,
.about-content{

    flex:1;

}

/*=========================================
SERVICES SECTION
=========================================*/

#services{

    padding:80px 8%;

    text-align:center;

}

.service-container{

    display:flex;

    justify-content:space-between;

    gap:30px;

    margin-top:40px;

}

.service-card{

    flex:1;

    background-color:#FFFFFF;

    padding:30px;

    border-radius:10px;

    transition:transform 0.3s;

}

.service-card:hover{

    transform:translateY(-8px);

}

.service-card img{

    border-radius:10px;

    margin-bottom:20px;

}

/*=========================================
PORTFOLIO
=========================================*/

#featured-work,
.portfolio-section{

    padding:80px 8%;

    text-align:center;

}

.gallery,
.portfolio-grid{

    display:grid;

    grid-template-columns:repeat(3, 1fr);

    gap:30px;

    margin-top:40px;

}

.gallery-item,
.portfolio-card{

    background-color:#FFFFFF;

    padding:20px;

    border-radius:10px;

    transition:transform 0.3s;

}

.gallery-item:hover,
.portfolio-card:hover{

    transform:scale(1.03);

}

.gallery-item img,
.portfolio-card img{

    border-radius:10px;

    margin-bottom:15px;

}

/*=========================================
WHY CHOOSE ME
=========================================*/

#why-me,
#why-work{

    padding:80px 8%;

    text-align:center;

}

.why-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

    margin-top:40px;

}

.why-grid article,
.why-grid div{

    background:#FFFFFF;

    padding:30px;

    border-radius:10px;

}

/*=========================================
SKILLS
=========================================*/

#skills{

    padding:80px 8%;

    text-align:center;

}

.skills-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

    margin-top:40px;

}

.skill-card{

    background:#FFFFFF;

    padding:30px;

    border-radius:10px;

}

/*=========================================
TESTIMONIALS
=========================================*/

#testimonials{

    padding:80px 8%;

    text-align:center;

}

.testimonial-container{

    display:flex;

    gap:30px;

    margin-top:40px;

}

.testimonial-card{

    flex:1;

    background:#FFFFFF;

    padding:30px;

    border-radius:10px;

}

/*=========================================
CALL TO ACTION
=========================================*/

#cta{

    background-color:#DDD2C4;

    text-align:center;

    padding:80px 8%;

}

#cta p{

    max-width:700px;

    margin:20px auto;

}

/*=========================================
CONTACT PAGE
=========================================*/

#contact-section{

    display:flex;

    justify-content:space-between;

    gap:50px;

    padding:80px 8%;

}

.contact-information{

    flex:1;

}

.contact-form{

    flex:1;

}

.contact-form form{

    display:flex;

    flex-direction:column;

}

.contact-form label{

    margin-top:15px;

    margin-bottom:8px;

    font-weight:bold;

}

.contact-form input,
.contact-form textarea{

    padding:12px;

    border:1px solid #CCCCCC;

    border-radius:5px;

    font-size:16px;

}

.contact-form textarea{

    resize:vertical;

}

.contact-details{

    margin-top:30px;

}

.contact-details h3{

    margin-top:20px;

}

/*=========================================
SERVICES (CONTACT PAGE)
=========================================*/

#contact-services{

    padding:80px 8%;

    text-align:center;

}

.services-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

    margin-top:40px;

}

.service-box{

    background:#FFFFFF;

    padding:30px;

    border-radius:10px;

}

/*=========================================
SOCIAL LINKS
=========================================*/

#socials{

    text-align:center;

    padding:80px 8%;

}

.social-links{

    margin-top:30px;

}

.social-links a{

    margin:0 15px;

    font-weight:bold;

}

.social-links a:hover{

    color:#8C7058;

}

/*=========================================
FOOTER
=========================================*/

footer{

    background:#1F1F1F;

    color:#FFFFFF;

    padding:60px 8% 20px;

}

.footer-container{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:40px;

}

footer h3{

    color:#FFFFFF;

    margin-bottom:15px;

}

footer p{

    color:#DDDDDD;

}

footer a{

    color:#DDDDDD;

}

footer a:hover{

    color:#FFFFFF;

}

.copyright{

    text-align:center;

    margin-top:40px;

    border-top:1px solid #555555;

    padding-top:20px;

}

/*=========================================
TABLET (768px)
=========================================*/

@media screen and (max-width:768px){

    header{

        flex-direction:column;

    }

    nav ul{

        flex-direction:column;

        text-align:center;

        margin-top:20px;

    }

    #hero,
    #about-home,
    #about-page,
    #contact-section{

        flex-direction:column;

        text-align:center;

    }

    .service-container,
    .testimonial-container{

        flex-direction:column;

    }

    .gallery,
    .portfolio-grid,
    .skills-grid,
    .why-grid,
    .services-grid,
    .footer-container{

        grid-template-columns:1fr 1fr;

    }

}

/*=========================================
MOBILE (480px)
=========================================*/

@media screen and (max-width:480px){

    h1{

        font-size:40px;

    }

    h2{

        font-size:30px;

    }

    h3{

        font-size:22px;

    }

    .gallery,
    .portfolio-grid,
    .skills-grid,
    .why-grid,
    .services-grid,
    .footer-container{

        grid-template-columns:1fr;

    }

    .btn,
    .btn-secondary{

        width:100%;

        text-align:center;

    }

    header{

        padding:20px;

    }

    #hero,
    #about-home,
    #about-page,
    #services,
    #featured-work,
    #contact-section{

        padding:50px 20px;

    }

}