/* Font-styles */
@font-face {
    font-family: "Coolvetica";
    src: url(../fonts/CoolveticaR.ttf) format(truetype);
}

@font-face {
    font-family: "Delicious";
    src: url(../fonts/Delicious.ttf) format(truetype);
}




                        /* Animations */
@keyframes moveInRight {
    0% {
        transform: translateY(10em);
        opacity: 0;
    }

    90% {
        transform: translateY(-.2em);
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}




                        /* Containers */

body {
    font-family: Arial, Helvetica, sans-serif;
}

 /* HeroSec */
.heroSec {
    display: flex;
    justify-content: center;
}

.navBar {
    width: 100%;
    height: 90px;
    background-color: #F7F7F7;
}

.heroContents {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

    z-index: 10;

    animation: fadeIn 1s ease-in;
}

.logosHero {
    display: flex;
    gap: 20px;
    margin-top: 280px;
    margin-bottom: 38px;
}

/* Project Info Section */

.interiorsSec {
    margin-top: 430px;
    display: flex;
    justify-content: center;

}

.inttextCont {
    margin-top: 150px;
    margin-left: 200px;
}

.role {
    width: 495px;
    height: auto;
    margin-left: -80px;
}

.background {
    width: 600px;
    height: auto;
}

/* Challenges and Problems Section */

.cpSec {
    margin-top: 50px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.cptextCont {
    margin-top: 150px;
    margin-left: 300px;
}

.challenges {
    width: 830px;
    height: auto;
    margin-left: -300px;
}

.solution {
    width: 790px;
    height: auto;
    margin-left: 250px;
}

/* Work in Progress Section */

.wipSec {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    margin-top: 300px;
}

.logoDetails {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    margin-top: 100px;
    padding: 20px;
    background-color: #F7F7F7;
}

.details {
    width: 50%;
}

.colourCont {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.colorbox {
    width: 80%;
    height: 30%;
}

/* Mock-up Section */
.mockupSec {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    margin-top: 300px;
}

/* Footer Section */
.footerCont {
    width: 100%;
    height: 200px;
    margin-top: 100px;
    background-color: #000000;
}





                        /* Text tags */

h1 {
    margin-bottom: -20px;
    font-family: 'Delicious';
    font-size: 137px;
    text-transform: uppercase;
    color: #2B2E34;
    position: relative;
}

.inttextCont h1 {
    font-size: 100px;
}

h2 {
    font-family: 'Coolvetica', sans-serif;
    font-size: 46px;
    text-transform: uppercase;
    color: #2B2E34;
}

h3 {
    font-family: 'Coolvetica', sans-serif;
    font-size: 25px;
}

h4 {
    font-family: 'Coolvetica', sans-serif;
    font-size: 50px;
}

.copy1 {
    font-family: Helvetica, sans-serif;
    font-size: 24px;
    line-height: 29px;
}

.copy2 {
    font-family: Helvetica, sans-serif;
    font-size: 30px;
    line-height: 36px;
}

.baskerville {
    font-family: 'Baskerville', serif;
    font-size: 30px;
}




                        /* Images */

.logosH {
    width: 60px;
    height: 60px;
}

.intTag {
    width: 500px;
    height: auto;
    margin-left: 100px;
}

.InteriorsLogo {
    width: 850px;
    height: auto;
}

.orange {
    display: flex;
    justify-content: center;
    align-items: center
    ;
    background-color: #c14729;
    color: white;
}

.brown {
    display: flex;
    justify-content: center;
    align-items: center
    ;
    background-color: #bc955c;
    color: white;
}

.yellow {
    display: flex;
    justify-content: center;
    align-items: center
    ;
    background-color: #deb83b;
    color: white;
}





                        /* CSS Grids */

.wipGridCont {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: repeat(2, 1fr);

    margin: 100px;
}

.wipItem5 {
    grid-column: 2/4;

    display: flex;
    justify-content: center;
}

.sketch {
    width: 300px;
    height: auto;

    display: grid;
    align-items: center;
    justify-items: center;
}

.gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
}

.galleryItem1 {
    grid-column: 1/4;
}

.mockups1 {
    width: 1200px;
    height: auto;
    
}
.mockups {
    width: 400px;
    height: auto;
}





                        /* Form Elements */

.formCont { 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

label {
    font-size: 14px;
    color: #000000;
}

input {
    width: 495px;
    height: 50px;
    margin-top: 5px;
    padding: 15px;
    border-radius: 6px;
    border-width: 1px;
 

    font-size: 16px;
    color: #000000;
}


input[type="submit"] {
    width: 495px;
    height: 50px;
    background-color: #FFC349;
    border: 0px;
    border-radius: 6px;


    font-family: Helvetica, sans-serif;
    text-transform: uppercase;
    color: black;
    font-size: 19px;
    padding: 11px;

}

input[type="submit"]:hover {
    background-color: #000000;
    color: white;
}

select {
    width: 495px;
    height: 50px;
    margin-top: 5px;
    padding: 10px;
    border-radius: 6px;
    border-width: 1px;

    font-family: Helvetica, sans-serif;
    font-size: 16px;
    color: #000000;
}




                        /* SVG Objects */


.objectsBG {
    position: absolute;
    z-index: -1;
}

.vector {
    width: auto;
    animation: moveInRight 1s ease-in;
}

.circle {
    width: auto;
    animation: moveInRight 2s ease-in;
}

.x {
    width: auto;
    animation: moveInRight 1s ease-in;
}

.box {
    width: auto;
    animation: moveInRight 1s ease-in;
}

/* Gum shape Black 1 */
.obj1 {
    position: relative;
    top: 347px;
    left: -85px;
}

/* Yellow Circle 1 */
.obj2 {
    position: relative;
    top: -280px;
    left: -230px;
}

/* Gum Yellow Shape 1 */
.obj3 {
    position: relative;
    top: 870px;
    left: -300px;
}

/* X Shape Yellow 1 */
.obj4{
    position: relative;
    top: -200px;
    left: 0px;
}

/* Black Circle 1 */
.obj5{
    position: relative;
    top: 400px;
    left: 0px;
}

/* Yellow Circle 2*/
.obj6{
    position: relative;
    top: -70px;
    left: 150px;
}

/* X shape 2 */
.obj7{
    position: relative;
    top: 270px;
    left: 150px;
}

/* Box Shape 1 */
.obj8{
    position: relative;
    top: -200px;
    left: 130px;
}

/* x Shape 3 black */
.obj9{
    position: relative;
    top: 600px;
    left: -100px;
}

/* Box Shape 2 */
.obj10{
    position: relative;
    top: 50px;
    left: 630px;
}

/* Gum Shape 3 */
.obj11{
    position: relative;
    top: 550px;
    left: -100px;
}

/* Box Shape 3 */
.obj12{
    position: relative;
    top: -350px;
    left: -100px;
}

/* small circle black 2 */
.obj13{
    position: relative;
    top: 50px;
    left: 230px;
}

/* Gum shape 4*/
.obj14{
    position: relative;
    top: 0px;
    left: 300px;
}

/* Gum shape 5*/
.obj15{
    position: relative;
    top: 800px;
    left: -800px;
}

/* x Shape 4 black */
.obj16{
    position: relative;
    top: -800px;
    left: -1060px;
}

/* Box shape 4 */
.obj17{
    position: relative;
    top: 500px;
    left: -900px;
}

/* small circle yellow 3 */
.obj18{
    position: relative;
    top: 400px;
    left: 200px;
}

@media only screen and (max-width: 700px) {
                        /* Containers */

                        body {
                            font-family: Arial, Helvetica, sans-serif;
                        }
                        
                         /* HeroSec */
                        .heroSec {
                            display: flex;
                            justify-content: center;
                        }
                        
                        .navBar {
                            width: 100%;
                            height: 90px;
                            background-color: #F7F7F7;
                        }
                        
                        .heroContents {
                            display: flex;
                            flex-direction: column;
                            justify-content: space-between;
                            align-items: center;
                        
                            z-index: 10;
                        
                            animation: fadeIn 1s ease-in;
                        }
                        
                        .logosHero {
                            display: flex;
                            gap: 10px;
                            margin-top: 140px;
                            margin-bottom: 20px;
                        }
                        
                        /* Project Info Section */
                        
                        .interiorsSec {
                            margin-top: 215px;
                            display: flex;
                            justify-content: center;
                        
                        }
                        
                        .inttextCont {
                            margin-top: 75px;
                            margin-left: 60px;
                        }
                        
                        .role {
                            width: 250px;
                            height: auto;
                            margin-left: -20px;
                            background-color: white;
                            padding: 20px;
                        }
                        
                        .background {
                            width: 300px;
                            height: auto;
                            background-color: white;
                            padding: 20px;
                        }
                        
                        /* Challenges and Problems Section */
                        
                        .cpSec {
                            margin-top: 25px;
                            display: flex;
                            flex-wrap: wrap;
                            justify-content: center;
                        }
                        
                        .cptextCont {
                            margin-top: 75px;
                            margin-left: auto;
                        }
                        
                        .challenges {
                            width: 415px;
                            margin: auto;
                            background-color: white;
                            padding: 20px;
                        }
                        
                        .solution {
                            width: 370px;
                            height: auto;
                            margin: auto;
                            background-color: white;
                            padding: 20px;
                        }
                        
                        /* Work in Progress Section */
                        
                        .wipSec {
                            display: flex;
                            flex-wrap: wrap;
                            justify-content: center;
                            align-items: center;
                            flex-direction: column;
                        
                            margin-top: 150px;
                        }
                        
                        .logoDetails {
                            display: flex;
                            flex-wrap: wrap;
                            justify-content: space-between;
                        
                            margin-top: 150px;
                            padding: 10px;
                            background-color: #F7F7F7;
                        }
                        
                        .details {
                            width: 50%;
                        }
                        
                        .colourCont {
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            flex-direction: column;
                        }
                        
                        .colorbox {
                            width: 80%;
                            height: 30%;
                        }
                        
                        /* Mock-up Section */
                        .mockupSec {
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            flex-direction: column;
                        
                            margin-top: 150px;
                        }
                        
                        /* Footer Section */
                        .footerCont {
                            width: 100%;
                            height: 200px;
                            margin-top: 50px;
                            background-color: #000000;
                        }
                        
                        
                        
                        
                        
                                                /* Text tags */
                        
                        h1 {
                            margin-bottom: -10px;
                            font-family: 'Delicious';
                            font-size: 70px;
                            text-transform: uppercase;
                            color: #2B2E34;
                            position: relative;
                        }
                        
                        .inttextCont h1 {
                            font-size: 50px;
                        }
                        
                        h2 {
                            font-family: 'Coolvetica', sans-serif;
                            font-size: 23px;
                            text-transform: uppercase;
                            color: #2B2E34;
                        }
                        
                        h3 {
                            font-family: 'Coolvetica', sans-serif;
                            font-size: 20px;
                        }
                        
                        h4 {
                            font-family: 'Coolvetica', sans-serif;
                            font-size: 25px;
                        }
                        
                        .copy1 {
                            font-family: Helvetica, sans-serif;
                            font-size: 12px;
                            line-height: 15px;
                        }
                        
                        .copy2 {
                            font-family: Helvetica, sans-serif;
                            font-size: 15px;
                            line-height: 18px;
                        }
                        
                        .baskerville {
                            font-family: 'Baskerville', serif;
                            font-size: 15px;
                        }
                        
                        
                        
                        
                                                /* Images */
                        
                        .logosH {
                            width: 30px;
                            height: 30px;
                        }
                        
                        .intTag {
                            width: 250px;
                            height: auto;
                            margin-left: 50px;
                        }
                        
                        .InteriorsLogo {
                            width: 425px;
                            height: auto;
                        }
                        
                        .orange {
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            background-color: #c14729;
                            color: white;
                        }
                        
                        .brown {
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            background-color: #bc955c;
                            color: white;
                        }
                        
                        .yellow {
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            background-color: #deb83b;
                            color: white;
                        }
                        
                        
                        
                        
                        
                                                /* CSS Grids */
                        
                        .wipGridCont {
                            display: grid;
                            grid-template-columns: repeat(3, 1fr);
                            grid-auto-rows: repeat(2, 1fr);
                        
                            margin: 50px;
                        }
                        
                        .wipItem5 {
                            grid-column: 2/4;
                        
                            display: flex;
                            justify-content: center;
                        }
                        
                        .sketch {
                            width: 150px;
                            height: auto;
                        
                            display: grid;
                            align-items: center;
                            justify-items: center;
                        }
                        
                        .gallery {
                            display: grid;
                            grid-template-columns: repeat(3, 1fr);
                            grid-template-rows: repeat(2, 1fr);
                        }
                        
                        .galleryItem1 {
                            grid-column: 1/4;
                        }
                        
                        .mockups1 {
                            width: 600px;
                            height: auto;
                            
                        }
                        .mockups {
                            width: 200px;
                            height: auto;
                        }
                        
                        
                        
                        
                        
                                                /* Form Elements */
                        
                        .formCont { 
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            align-items: center;
                        }
                        
                        label {
                            font-size: 14px;
                            color: #000000;
                        }
                        
                        input {
                            width: 495px;
                            height: 50px;
                            margin-top: 5px;
                            padding: 15px;
                            border-radius: 6px;
                            border-width: 1px;
                         
                        
                            font-size: 16px;
                            color: #000000;
                        }
                        
                        
                        input[type="submit"] {
                            width: 495px;
                            height: 50px;
                            background-color: #FFC349;
                            border: 0px;
                            border-radius: 6px;
                        
                        
                            font-family: Helvetica, sans-serif;
                            text-transform: uppercase;
                            color: black;
                            font-size: 19px;
                            padding: 11px;
                        
                        }
                        
                        input[type="submit"]:hover {
                            background-color: #000000;
                            color: white;
                        }
                        
                        select {
                            width: 495px;
                            height: 50px;
                            margin-top: 5px;
                            padding: 10px;
                            border-radius: 6px;
                            border-width: 1px;
                        
                            font-family: Helvetica, sans-serif;
                            font-size: 16px;
                            color: #000000;
                        }

}