/* -------------------FONTS ------------------- */
@font-face {
    font-family: 'Britany';
    src: url('Britany.ttf') format('truetype')
}

/* -------------------BODY SECTIONS------------------- */


a {
    all: unset;
}

button
{
    all: unset;
}

section {
    z-index: 1;
    overflow: hidden;
    height: min-content !important;
    padding: 2% 5% !important;
}

body{
    background-image: url("../images/main_background.png");
    background-position: right top;
}

h3{
    font-size:  2.3vh !important;
}

/* ------------------- Overall Project ------------------- */

.projSection {
    width: 100%;
    display: flex;
    overflow: hidden;  
    height: min-content;
    width: 100%;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;

    color: #FBF3E4;
    /* background-color : #FBF3E4; */
}

.projLeftSide{
    width: 50%;
    overflow: hidden;

    max-width: 100%; 
    text-align: center; 

}

.projLeftSide img{
    max-width: 50%;

    display: inline-block; 
    vertical-align: middle; 
}

.projRightSide{
    width: 50%;
    padding: 2% 3%;
}

.projSection h1 {
    font-family: "Poppins", sans-serif;
    font-weight: 100;
    font-style: normal;
}

/* -------------------Landing------------------- */

.projLanding{
    /* border: #c38686 1px solid; */
    height: 100vh !important;

    justify-content: center;
    align-items: center;

}

.projLanding h3{
    margin: 5% 0%;
    width: 80%;
}
.projLanding .projRightSide{
    width: 50%;
    padding: 2% 3%;
}

.projLanding .projRightSide img{
    width: 30vw;
}
.projLanding img{
    max-width: 100%;
    width: 35%;
}


/* ------------------- Intro ------------------- */

.intro .projRightSide{
    text-align: justify;
    padding: 2% 3%;
}

.intro .projRightSide h3{
    margin: 3% 0%;
    width: auto;
}

.intro .projLeftSide img{
    max-width: 100%;
    width: 45%;
}

/* ------------------- About ------------------- */

.about .projAboutH3{
    margin-top: 6%;
    padding: 0%;
    width: 100%;
}

.about .projLeftSide img{
    width: 50%;
    margin-top: 20%;
}

/* ------------------- BrandStory ------------------- */

.brandStory .projRightSide{
    padding: 4% 3%;
}

.brandStoryH3{
    margin: 3% 0%;
    padding: 0%;
    width: 100%;
}

/* ------------------- projectObjective------------------- */

.objective .projLeftSide{
    width: 45vw;
    padding: 2%;
    text-align: left;

}

.objective .projRightSide{
    width: 45vw;
    padding: 2%;
    /* text-align: left; */
    direction: rtl;
}

.objective ul{
    list-style-type: none;
}

.objective h3{
    margin: 0%;
    padding: 0%;
}

.objective .projSection hr{ 
    height: 400px; 
    border-right: 1% solid #fbf3e4; 
    margin: 0 0;
}

/* ------------------- photoSection------------------- */

.photo .projSection img{
    max-width: 100%;
    width: 90%;
    margin-top: 4%;
    /* border: #c3a186 1px solid; */
}

.photo .projSection {
    height: min-content;
}

.photo .projRightSide img{
    max-width: 100%;
    width: 100%;
    margin-top: 5%;
    /* margin-top: 3vh; */
}

.photo .projLeftSide h1{
    padding-right: 4%;
    text-align: right;
}

/* ------------------- videoDemo------------------- */

.videoDemo iframe{
    height: 40vh;
    width: 100%;
}

.videoDemo .projSection {
    padding: 0%;
    height: 70vh;

}
.videoDemo .projLeftSide{
    width: 50%;
    padding: 3% 3%;
}

.videoDemo .projRightSide{
    /* width: 45%; */
    padding: 3% 5%;

}

.videoDemo h1{
    text-align: right;
    width: auto;
}

.videoDemo h3{
    text-align: right;
    width: auto;
    margin-top: 5%;
}

/* -------------------BUTTON------------------- */

.visitSite{
    color: #030303;
    background-color : #FBF3E4;
    padding: 1% 10%;
    margin-top: 3%;
    font-family: 'Poppins', sans-serif;
    font-size: 1.2rem;
}

.visitSite:hover{
    color: #fff;
    background-color : #C3A185;
}


/* -------------------CUSTOM CSS------------------- */

    /* custom SCROLL BAR css*/

        /* width */
        ::-webkit-scrollbar {
            width: 15px;
        }
        
        /* Track */
        ::-webkit-scrollbar-track {
            background: #626262; 
        }
        
        /* Handle */
        ::-webkit-scrollbar-thumb {
            background: #888; 
        }
        
        /* Handle on hover */
        ::-webkit-scrollbar-thumb:hover {
            background: #555; 
        }

    /* custom HEADING TAGS css*/
/* 
        h1{
            font-family: 'Poppins', sans-serif;
            font-size: 45px;
        }
        h2{
            font-family: 'Britany', sans-serif;
            font-size: 45px;
        }
        h3{
            font-family: 'Poppins', sans-serif;
            font-size: 25px;
        } */









/* ///////////////////////////////////////MOBILE VIEW///////////////////////////////////// */
/* ///////////////////////////////////////MOBILE VIEW///////////////////////////////////// */
/* ///////////////////////////////////////MOBILE VIEW///////////////////////////////////// */
/* ///////////////////////////////////////MOBILE VIEW///////////////////////////////////// */
/* ///////////////////////////////////////MOBILE VIEW///////////////////////////////////// */
/* ///////////////////////////////////////MOBILE VIEW///////////////////////////////////// */









@media (max-width: 600px) {

        /* -------------------BODY SECTIONS------------------- */

        section {
            z-index: 1;
            overflow: hidden;
            height: min-content !important;
            padding: 2% 5% !important;
        }

        body{
            background-image: url("../images/main_background_vertical.png");
            background-position: right top;
        }

        nav{
            visibility:visible !important;
        }
        
        /* ------------------- Overall Project ------------------- */

        .projSection {
            flex-direction: column;
            border-bottom: #ffffff 1px solid;
            height: 100vh;
        }

        .projLeftSide{
            width: 100%;
            overflow: hidden;

            max-width: 100%; 
            text-align: center; 
            margin: 5% 0%;

        }

            .projLeftSide img{
                max-width: 50%; 
                display: inline-block;
                vertical-align: middle; 
            }

        .projRightSide{
            width: 100%;
            padding: 2% 3%;
            margin: 5% 0%;
            text-align: center;
        }

        .projSection h1 {
            font-size:  9.5vw !important;
            text-align: center;
            font-family: "Poppins", sans-serif;
            font-weight: 400;
            font-style: normal;
            text-align: center;

        }

        .projSection h3{
            font-size:  1.5vh !important;
            text-align: justify !important;
            text-align-last: left;
        }

        /* -------------------Landing------------------- */

        .projLanding .projSection{
            flex-direction:column-reverse;


        }

        .projLanding .projRightSide{
            width: 80%;
        }

        /* .projLanding .projRightSide img{
            width: 100%;
        } */

        .projLanding .projRightSide h1{
            text-align: center  !important;
            width: 100%;
        }

        .projLanding .projRightSide h3{
            text-align: justify  !important;
            text-align-last: center;
            width: 100%;
            margin-top: 8%;
        }

        .projLanding .projRightSide button{
            margin-top: 7vh;
        }

        .projLanding img{
            max-width: 100%;
            width: 50%;
            margin-left: 10%;
        }


        /* ------------------- Intro ------------------- */

        .intro .projRightSide{
            text-align: justify;
            padding: 2% 3%;
        }

        .intro .projRightSide h3{
            margin: 3% 0%;
            width: auto;
        }

        .intro img{
            max-width: 100%;
            width: 39%;
        }

        /* ------------------- About ------------------- */

        .about .projAboutH3{
            margin-top: 6%;
            padding: 0%;
            width: 100%;
        }

        .about .projLeftSide img{
            width: 50%;
            margin-top: 20%;
        }

        /* ------------------- BrandStory ------------------- */

        .brandStory {
            flex-direction: column-reverse;
        }

        .brandStory .projRightSide{
            padding: 4% 3%;
        }

        .brandStoryH3{
            margin: 3% 0%;
            padding: 0%;
            width: 100%;
        }

        /* ------------------- projectObjective------------------- */

        .objective .projSection{
            /* height: auto; */
            padding-bottom: 5%;
        }

        .objective .projLeftSide{
            width: 80vw;
            padding: 0%;
            text-align: left;
        
        }
        
        .objective .projRightSide{
            width: 80vw;
            margin: 0%;
            padding: 0%;
            direction: rtl;
        }

        .objective .projRightSide h3{
            width: auto;
        }
        
        .objective ul{
            list-style-type: none;
        }
        
        .objective h3{
            margin: 0%;
            padding: 0%;
        }
        
        .objective .projSection hr{ 
            display: none;
            height: 400px; 
            border-right: 1% solid #ffffff; 
            margin: 0 0;
        }

        /* ------------------- photoSection------------------- */

        .photo .projSection{
            display:grid;
            padding: 4% 3%;
            /* justify-content:start; */
        }

        .photo .projSection img{
            /* max-width: 100%; */
            width: 90%;
            margin-top: 10%;
            /* border: #c3a186 1px solid; */

        }

        .photo .projLeftSide h1{
            padding-right: 4%;
            text-align: center;
        }

    /* ------------------- videoDemo------------------- */

        .videoDemo iframe{
            height: 320px;
            width: auto;
        }

        .videoDemo .projSection {
            padding: 0%;
            height: 100vh;
            text-align: center;

        }
        .videoDemo .projLeftSide{
            width: 100%;
            /* padding: 3% 3%; */
        }

        .videoDemo .projRightSide{
            width: 100%;
            padding: 3% 5%;
        }

        .videoDemo h1{
            text-align: center;
            width: auto;
        }

        .videoDemo .projAboutH3{
            text-align: center;
            width: auto;
            margin-top: 5%;
        }

        /* -------------------BUTTON------------------- */

        .visitSite{
            /* background-color: #FBF3E4; */
            /* color: #040404; */
            padding: 1% 10%;
            /* margin-top: 3%; */
            font-family: 'Poppins', sans-serif;
            font-size: 4vw;
        }

        .visitSite:hover{
            /* background-color: #c3a186;
            color: #FBF3E4; */
        }

        /* -------------------CUSTOM CSS------------------- */

            /* custom SCROLL BAR css*/

                /* width */
                ::-webkit-scrollbar {
                    width: 15px;
                }
                
                /* Track */
                ::-webkit-scrollbar-track {
                    background: #626262; 
                }
                
                /* Handle */
                ::-webkit-scrollbar-thumb {
                    background: #888; 
                }
                
                /* Handle on hover */
                ::-webkit-scrollbar-thumb:hover {
                    background: #555; 
                }   
}