@import url('https://fonts.googleapis.com/css2?family=Abhaya+Libre:wght@400;500;600;700&family=Inter:wght@300;400;500;700&family=Poppins:wght@300;500;600;700&display=swap');

*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}
/****/
body {
    font-family: 'Abhaya Libre', serif;
    overflow-x: hidden !important;
    background: #000000;
    scroll-behavior: smooth;
}



/**WRAPPER**/

#box-cont {
    width: 100%;
    height: 100vh;
    position: fixed;
    overflow: hidden;
    z-index: 98;
    pointer-events: none;
}

#box {
    background-color: var(--clr-box);
    width: 100%;
    height: 100vh;
    margin-left: -100%;
    position: absolute;
}

/**END OF WRAPPER**/


/**SPLASH SECTION**/
#splash {
    width: 100%;
    height: 100vh;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: absolute;
    background-color: var(--clr-white);
    pointer-events: none;
    z-index: 99;
    opacity: 0;
}

#splash-curtain { 
    width: 100%;
    height: 100vh;
    background-color: var(--clr-white);
    position: absolute;
    left: 0%;
    z-index: 1;
}

#splash-title {
    color: var(--clr-black);

    font-size: 8vmax;
    opacity: 0;
}

#splash-desc {
    color: var(--clr-black);

    font-size: 1.3vmax;
    opacity: 0;
    position: relative;
    top: -7vmax;
}
/**END OF SPLASH SECTION**/


/**HOME PAGE**/
#home-cont {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

#home-cont nav {
    position: relative;
    width: 100%;
    height: auto;

    /* background-color: yellow; */
    display: -webkit-flex;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;

    margin-top: 2.5vmax;
}

.home-nav {
    color: var(--clr-black);
    text-decoration: none;
}

#home-cont nav a:nth-child(1){

    font-size: 0.9vmax;
    /* background-color: pink; */
    font-weight: 700;
    position: absolute;
    left: 0;
    margin-left: 5vmax;
}

#home-cont nav a:nth-child(2){
    width: auto;

    font-size: 1.3vmax;
    /* background-color: green; */
    font-weight: 500;
}

#home-cont nav a:nth-child(3){

    font-size: 0.9vmax;
    /* background-color: pink; */
    font-weight: 700;
    position: absolute;
    right: 0;
    margin-right: 5vmax;
}



#awardSection{
    visibility: hidden;
}
#proj-info{
    visibility: hidden;
}

#frame {
    display: -webkit-flex;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
}

#frame .base {
    width: 100vw;
    height: 100vh;
    z-index: -2;
    top: 0;
    position: absolute;
    transition: all 0.5s ease-out;
}

#frame .base:nth-child(1){
    background-image:url(./media/Pic1.png);
    left: 0vmax;
    top: 0%;
    min-height: 100vh;
    width: 100vw;
    transition: all 0.5s ease-out;

    /* transform: rotate(-8deg); */
}

#frame .base:nth-child(2){
    background-image:url(./media/Pic1.png);
    top: 0%;
    margin-top: -33vh;
    min-height: 100vh;
    width: 100vw;
    transition: all 0.5s ease-out;
}
.prev_standard{
    color: white;
    font-size: 1.8vw !important;
}
#frame .base:nth-child(3){
    background-image:url(./media/Pic1.png);
    right: 0vmax;
    top: 0%;
    min-height: 100vh;
    width: 100vw;
    transition: all 0.5s ease-out;
    /* transform: rotate(-8deg); */
}

#frame .base:nth-child(1){
    background-image:url(./media/Pic1.png);
    left: 0vmax;
    top: 0%;
    min-height: 100vh;
    width: 100vw;
    transition: all 0.5s ease-out;

    /* transform: rotate(-8deg); */
}


.linkall{
    color: inherit;
    text-decoration: none;
}
.linkall:hover{
    color: inherit;
}

#frame .base:nth-child(2){
    background-image:url(./media/Pic1.png);
    top: 0%;
    margin-top: -33vh;
    min-height: 100vh;
    width: 100vw;
    transition: all 0.5s ease-out;
}
.prev_standard{
    color: white;
    font-size: 1.8vw !important;
}
#frame .base:nth-child(3){
    background-image:url(./media/Pic1.png);
    right: 0vmax;
    top: 0%;
    min-height: 100vh;
    width: 100vw;
    transition: all 0.5s ease-out;
    /* transform: rotate(-8deg); */
}


#belt {
    display: -webkit-flex;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    width: 30vw;
}
.scroll-top{
    background: white;
    border-radius: 5px;
    outline: none;
    border: none;
    color: white;
    position: fixed;
    top: 85%;
    width: 8vw;
    justify-content: center;
    align-items: center;
    padding:5px;
    left: 90%;
    display: none;
    z-index: 999;
}
.scroll_icons{
    width: 2vw;
}
.scrolltop_parra{
    font-size: 0.9vw;
    color: #000;
    margin-bottom: 0px;
}
.award {
    width: 50vw;
    height: 70vh; /*66*/
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    z-index: -1;
    filter: drop-shadow(20px 30px 30px rgba(0, 0, 0, 0.2));
}

#belt div:nth-child(1) {
    background-image: url('../images/portfolio/1.webp');
    opacity: 0;
    left: 0vmax;
    top: 94%;
    transform: rotate(14deg);
}

#belt div:nth-child(2) {
    background-image: url('../images/portfolio/3.webp');
    opacity: 1;
    left: 0vmax;
    top: 94%;
    transform: rotate(14deg);
}

#belt div:nth-child(3) {
    background-image: url('../images/portfolio/10.webp');
    opacity: 1;
    top: 17%;
    margin-left: 50%;
    left: -22vh;
    transform: rotate(-10deg);
}

#belt div:nth-child(4) {
    background-image: url('../images/portfolio/4.webp');
    opacity: 1;
    right: 0vmax;
    top: -62%;
    transform: rotate(14deg);
}
#belt div:nth-child(5) {
    background-image: url('../images/portfolio/5.webp');
    opacity: 1;
    right: 0vmax;
    top: -62%;
    transform: rotate(14deg);
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}
#belt div:nth-child(6) {
    background-image: url('../images/portfolio/6.webp');
    opacity: 1;
    right: 0vmax;
    top: -62%;
    transform: rotate(14deg);
}
#belt div:nth-child(7) {
    background-image: url('../images/portfolio/7.webp');
    opacity: 1;
    right: 0vmax;
    top: -62%;
    transform: rotate(14deg);
}
#belt div:nth-child(8) {
    background-image: url('../images/portfolio/8.webp');
    opacity: 1;
    right: 0vmax;
    top: -62%;
    transform: rotate(14deg);
}
#belt div:nth-child(9) {
    background-image: url('../images/portfolio/10.webp');
    opacity: 1;
    right: 0vmax;
    top: -62%;
    transform: rotate(14deg);
}
#belt div:nth-child(10) {
    background-image: url('../images/portfolio/2.webp');
    opacity: 1;
    right: 0vmax;
    top: -62%;
    transform: rotate(14deg);
}
#belt div:nth-child(11) {
    background-image: url('../images/portfolio/11.webp');
    opacity: 1;
    right: 0vmax;
    top: -62%;
    transform: rotate(14deg);
}

.spot1_next {
    -webkit-animation-name: spot1_next;
    -webkit-animation-duration: 2s;
    -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes spot1_next {
	0% { opacity: 0; top: 94%; margin-left: 0%; left: 0vmax; -webkit-transform: rotate(14deg); } /* transform: rotate(14deg);*/
	100% { opacity: 1; top: 94%; margin-left: 0%; left: 0vmax; -webkit-transform: rotate(14deg); }
}

.spot2_next {
    -webkit-animation-name: spot2_next;
    -webkit-animation-duration: 1s;
    -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes spot2_next {
	0% { opacity: 1; top: 94%; margin-left: 0%; left: 0vmax; -webkit-transform: rotate(14deg); }
	100% { opacity: 1; top: 17%; margin-left: 50%; left: -22vh; -webkit-transform: rotate(-10deg); }
} 

.spot3_next {
    -webkit-animation-name: spot3_next;
    -webkit-animation-duration: 1s;
    -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes spot3_next {
	0% { opacity: 1; top: 17%; margin-left: 50%; left: -22vh; -webkit-transform: rotate(-10deg); } 
	100% { opacity: 1; top: -62%; margin-left: 100%; left: -44vh; -webkit-transform: rotate(14deg); } 
} 

.spot4_next {
    -webkit-animation-name: spot4_next;
    -webkit-animation-duration: 2s;
    -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes spot4_next {
	0% { opacity: 1; top: -62%; margin-left: 100%; left: -44vh; -webkit-transform: rotate(14deg); }
	50% { opacity: 0; top: -62%; margin-left: 100%; left: -44vh; -webkit-transform: rotate(14deg); }
    100% { opacity: 0; top: 94%; margin-left: 0%; left: 0vmax; -webkit-transform: rotate(14deg); }
} 

.spot5_next {
    -webkit-animation-name: spot5_next;
    -webkit-animation-duration: 2s;
    -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes spot5_next {
	0% { opacity: 1; top: -62%; margin-left: 100%; left: -44vh; -webkit-transform: rotate(14deg); }
	50% { opacity: 0; top: -62%; margin-left: 100%; left: -44vh; -webkit-transform: rotate(14deg); }
    100% { opacity: 0; top: 94%; margin-left: 0%; left: 0vmax; -webkit-transform: rotate(14deg); }
} 
.spot6_next {
    -webkit-animation-name: spot6_next;
    -webkit-animation-duration: 2s;
    -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes spot6_next {
	0% { opacity: 1; top: -94%; margin-left: 100%; left: -44vh; -webkit-transform: rotate(14deg); }
	50% { opacity: 0; top: -62%; margin-left: 100%; left: -44vh; -webkit-transform: rotate(14deg); }
    100% { opacity: 0; top: 94%; margin-left: 0%; left: 0vmax; -webkit-transform: rotate(14deg); }
} 
.spot7_next {
    -webkit-animation-name: spot7_next;
    -webkit-animation-duration: 2s;
    -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes spot7_next {
	0% { opacity: 1; top: -124%; margin-left: 100%; left: -44vh; -webkit-transform: rotate(14deg); }
	50% { opacity: 0; top: -62%; margin-left: 100%; left: -44vh; -webkit-transform: rotate(14deg); }
    100% { opacity: 0; top: 94%; margin-left: 0%; left: 0vmax; -webkit-transform: rotate(14deg); }
} 
.spot8_next {
    -webkit-animation-name: spot8_next;
    -webkit-animation-duration: 2s;
    -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes spot8_next {
	0% { opacity: 1; top: -124%; margin-left: 100%; left: -44vh; -webkit-transform: rotate(14deg); }
	50% { opacity: 0; top: -62%; margin-left: 100%; left: -44vh; -webkit-transform: rotate(14deg); }
    100% { opacity: 0; top: 94%; margin-left: 0%; left: 0vmax; -webkit-transform: rotate(14deg); }
} 
.spot9_next {
    -webkit-animation-name: spot9_next;
    -webkit-animation-duration: 2s;
    -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes spot9_next {
	0% { opacity: 1; top: -124%; margin-left: 100%; left: -44vh; -webkit-transform: rotate(14deg); }
	50% { opacity: 0; top: -62%; margin-left: 100%; left: -44vh; -webkit-transform: rotate(14deg); }
    100% { opacity: 0; top: 94%; margin-left: 0%; left: 0vmax; -webkit-transform: rotate(14deg); }
} 
.spot10_next {
    -webkit-animation-name: spot10_next;
    -webkit-animation-duration: 2s;
    -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes spot10_next {
	0% { opacity: 1; top: -124%; margin-left: 100%; left: -44vh; -webkit-transform: rotate(14deg); }
	50% { opacity: 0; top: -62%; margin-left: 100%; left: -44vh; -webkit-transform: rotate(14deg); }
    100% { opacity: 0; top: 94%; margin-left: 0%; left: 0vmax; -webkit-transform: rotate(14deg); }
} 
.spot11_next {
    -webkit-animation-name: spot11_next;
    -webkit-animation-duration: 2s;
    -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes spot11_next {
	0% { opacity: 1; top: -124%; margin-left: 100%; left: -44vh; -webkit-transform: rotate(14deg); }
	50% { opacity: 0; top: -62%; margin-left: 100%; left: -44vh; -webkit-transform: rotate(14deg); }
    100% { opacity: 0; top: 94%; margin-left: 0%; left: 0vmax; -webkit-transform: rotate(14deg); }
} 


.spot1_prev {
    -webkit-animation-name: spot1_prev;
    -webkit-animation-duration: 2s;
    -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes spot1_prev {
	0% { opacity: 1; top: 94%; margin-left: 0%; left: 0vmax; -webkit-transform: rotate(14deg); }
	100% { opacity: 0; top: 94%; margin-left: 0%; left: 0vmax; -webkit-transform: rotate(14deg); }
}

.spot2_prev {
    -webkit-animation-name: spot2_prev;
    -webkit-animation-duration: 1s;
    -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes spot2_prev {
	0% { opacity: 1; top: 17%; margin-left: 50%; left: -22vh; -webkit-transform: rotate(-10deg); }
	100% { opacity: 1; top: 94%; margin-left: 0%; left: 0vmax; -webkit-transform: rotate(14deg); }
} 

.spot3_prev {
    -webkit-animation-name: spot3_prev;
    -webkit-animation-duration: 1s;
    -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes spot3_prev {
	0% { opacity: 1; top: -62%; margin-left: 100%; left: -44vh; -webkit-transform: rotate(14deg); }
	100% { opacity: 1; top: 17%; margin-left: 50%; left: -22vh; -webkit-transform: rotate(-10deg); }
} 

.spot4_prev {
    -webkit-animation-name: spot4_prev;
    -webkit-animation-duration: 2s;
    -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes spot4_prev {
	0% { opacity: 0; top: 94%; margin-left: 0%; left: 0vmax; -webkit-transform: rotate(14deg); } 
	10% { opacity: 0; top: -62%; margin-left: 100%; left: -44vh; -webkit-transform: rotate(14deg); } 
    100% { opacity: 1; top: -62%; margin-left: 100%; left: -44vh; -webkit-transform: rotate(14deg); } 
} 

.spot5_prev {
    -webkit-animation-name: spot5_prev;
    -webkit-animation-duration: 2s;
    -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes spot5_prev {
	0% { opacity: 1; top: -124%; margin-left: 100%; left: -44vh; -webkit-transform: rotate(14deg); }
	10% { opacity: 1; top: -124%; margin-left: 50%; left: -22vh; -webkit-transform: rotate(14deg); }
	100% { opacity: 1; top: -124%; margin-left: 50%; left: -22vh; -webkit-transform: rotate(14deg); }
} 
.spot6_prev {
    -webkit-animation-name: spot6_prev;
    -webkit-animation-duration: 2s;
    -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes spot6_prev {
	0% { opacity: 1; top: -154%; margin-left: 100%; left: -44vh; -webkit-transform: rotate(14deg); }
	10% { opacity: 1; top: -124%; margin-left: 50%; left: -22vh; -webkit-transform: rotate(14deg); }
	100% { opacity: 1; top: -124%; margin-left: 50%; left: -22vh; -webkit-transform: rotate(14deg); }
} 
.spot7_prev {
    -webkit-animation-name: spot7_prev;
    -webkit-animation-duration: 2s;
    -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes spot7_prev {
	0% { opacity: 1; top: -184%; margin-left: 100%; left: -44vh; -webkit-transform: rotate(14deg); }
	10% { opacity: 1; top: -124%; margin-left: 50%; left: -22vh; -webkit-transform: rotate(14deg); }
	100% { opacity: 1; top: -124%; margin-left: 50%; left: -22vh; -webkit-transform: rotate(14deg); }
} 
.spot8_prev {
    -webkit-animation-name: spot8_prev;
    -webkit-animation-duration: 2s;
    -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes spot8_prev {
	0% { opacity: 1; top: -184%; margin-left: 100%; left: -44vh; -webkit-transform: rotate(14deg); }
	10% { opacity: 1; top: -124%; margin-left: 50%; left: -22vh; -webkit-transform: rotate(14deg); }
	100% { opacity: 1; top: -124%; margin-left: 50%; left: -22vh; -webkit-transform: rotate(14deg); }
} 
.spot9_prev {
    -webkit-animation-name: spot9_prev;
    -webkit-animation-duration: 2s;
    -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes spot9_prev {
	0% { opacity: 1; top: -184%; margin-left: 100%; left: -44vh; -webkit-transform: rotate(14deg); }
	10% { opacity: 1; top: -124%; margin-left: 50%; left: -22vh; -webkit-transform: rotate(14deg); }
	100% { opacity: 1; top: -124%; margin-left: 50%; left: -22vh; -webkit-transform: rotate(14deg); }
} 
.spot10_prev {
    -webkit-animation-name: spot10_prev;
    -webkit-animation-duration: 2s;
    -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes spot10_prev {
	0% { opacity: 1; top: -184%; margin-left: 100%; left: -44vh; -webkit-transform: rotate(14deg); }
	10% { opacity: 1; top: -124%; margin-left: 50%; left: -22vh; -webkit-transform: rotate(14deg); }
	100% { opacity: 1; top: -124%; margin-left: 50%; left: -22vh; -webkit-transform: rotate(14deg); }
} 
.spot11_prev {
    -webkit-animation-name: spot11_prev;
    -webkit-animation-duration: 2s;
    -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes spot11_prev {
	0% { opacity: 1; top: -184%; margin-left: 100%; left: -44vh; -webkit-transform: rotate(14deg); }
	10% { opacity: 1; top: -124%; margin-left: 50%; left: -22vh; -webkit-transform: rotate(14deg); }
	100% { opacity: 1; top: -124%; margin-left: 50%; left: -22vh; -webkit-transform: rotate(14deg); }
} 


.text_particles{
    position: absolute;
    right: -44%;
    top: 42%;
}

.para_portfolio{
    color: white;
    font-size: 1.8vw;
    width: 30%;
}

#home-navSection {
    width: 45vw;
    height: auto;
    /* background-color: pink; */
    display: -webkit-flex;
    display: flex;
    flex-flow: row wrap;
    align-items: center;

    position: absolute;
    left: 50%;
    margin-left: -22.5vw;
    top: 50%;
}

#nextSection {
    width: 7vmax; /*14vh*/
    height: auto; /*2.6vh*/
    top: 50%;
    /* background-color: yellow; */
    margin-left: auto;
    display: -webkit-flex;
    display: flex;
    align-content: center;
}

#nextSection div:nth-child(1) {
    width: 75%;
    height: auto;
    float: left;
    /* background-color: lightblue; */
}

#nextSection div:nth-child(1) .navLine{ 
    background-color: white;
    position: relative;
    top: 50%;
    width: 60%;
    height: 0.1vh;
}

#nextSection div:nth-child(2){
    /* background-color: orange; */
    cursor: pointer;
    font-size: 1vmax;
    float: right;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    width: auto;
    height: 100%;
}

#prevSection {
    width: 7vmax;
    height: auto;
    top: 50%;
    /* background-color: yellow; */
    margin-right: auto;
    display: -webkit-flex;
    display: flex;
    align-content: center;
}

#prevSection div:nth-child(1){
    /* background-color: orange; */
    cursor: pointer;
    font-size: 1vmax;
    float: left;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    width: auto;
    height: 100%;
}

#prevSection div:nth-child(2) {
    width: 75%;
    height: auto;
    float: right;
    /* background-color: violet; */
}

#prevSection div:nth-child(2) .navLine{ 
    background-color: white;
    position: relative;
    top: 50%;
    width: 60%;
    height: 0.1vh;
    float: right;
}





#proj-info {
    width: 25vh;
    height: 40vh;
    top: 50%;
    right: 5vmax;
    position: absolute;
    margin: -20vh 0 0 -12.5vh;
    /* background-color: yellow; */
}

#shotSection {
    width: auto;
    height: 2vh;
    overflow: hidden;
    /* background-color: pink; */
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-end;
    align-items: center;
}

#shotNumContainer {
    display: -webkit-flex;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
}

.shot_node {

    font-weight: 600;
    width: auto;
    height: auto;
    /* background-color: violet; */
}

#shotSection div:nth-child(1) {
    margin-right: 1vmax;

    font-weight: 600;
    font-size: 0.9vmax;
}

#shotSection div:nth-child(2) {

    font-weight: 600;
    font-size: 0.9vmax;
    text-align: center;
    margin-right: 1vmax;
    /* background-color: yellow; */
}

#shotSection div:nth-child(3) {
    width: 2vmax;
    height: 0.1vh;
    margin-right: 1vmax;
    background-color: #bebebe;
}

#shotSection div:nth-child(4) {

    font-weight: 600;
    font-size: 0.9vmax;
    color: #bebebe;
}

#awardSection {
    width: 100%;
    height: 20vh;
    position: absolute;
    top: 50%;
    margin-top: -10vh;
    /* background-color: pink; */
    display: -webkit-flex;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    gap: 10% 10%;
}

#awardSection div:nth-child(1) {
    width: 100%;
    height: 7vh;
    overflow: hidden;
    /* background-color: red; */
}

#awardSection div:nth-child(1) p:nth-child(1){
    margin-top: -13vh;
}

.awardTitle1_node {
    display: table;
    vertical-align: middle;

    font-weight: 600;
    font-size: 5.5vh;
    width: 100%;
    height: 100%;
    text-align: right;
}

#awardSection div:nth-child(2) {
    width: 100%;
    height: 7vh;
    overflow: hidden;
    top: 38%;
    /* background-color: blue; */
}

#awardSection div:nth-child(2) p:nth-child(1){
    margin-top: -13vh;
}

.awardTitle2_node {
    display: table;
    vertical-align: middle;

    font-weight: 600;
    font-size: 5.5vh;
    width: 100%;
    height: 100%;
    text-align: right;
}

#awardSection div:nth-child(3) {
    width: 100%;
    height: 7vh;
    overflow: hidden;
    bottom: 0vh;
    /* background-color: green; */
}

#awardSection div:nth-child(3) p:nth-child(1){
    margin-top: -13vh;
}

.awardTitle3_node {
    display: table;
    vertical-align: middle;

    font-weight: 600;
    font-size: 5.5vh;
    width: 100%;
    height: 100%;
    text-align: right;
}

#home-proj-info-m {
    display: none;
}

#dateSection {
    width: 100%;
    height: 2vh;
    position: absolute;
    bottom: 0;
    overflow: hidden;
}

#dateSection p:nth-child(1){
    margin-top: -3.7vh;
}

.date_node {

    font-weight: 600;
    font-size: 1.7vh;
    width: 100%;
    height: 100%;
    padding: 0;
    text-align: right;
}

#social-media {
    width: 3vh;
    height: 21vh;
    position: absolute;
    left: 5.8vmax;
    top: 50%;
    margin: -10.5vh 0 0 -1.5vh;
    display: -webkit-flex;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-content: center;
    gap: 2.5vmax;
}

.social_icon {
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    width: 100%;
    height: 3vmax;
    cursor: pointer;
}

#fb {
    background-image: url("media/fb_icon.png");
}

#tw {
    background-image: url("media/tw_icon.png");
}

#ig {
    background-image: url("media/ig_icon.png");
}
.marketing_para, .market_para{
    font-size: x-large;

}
.marketing_heading1 , .marketing_para, .market_para{
    color: white;
    font-family: Arial, Helvetica, sans-serif;
}

/**************************** BREAKPOINTS ****************************/

@media only screen and (min-width: 1920px) { /*LARGE BREAKPOINT; 1920px wide and above*/
    /**START OF HOME PAGE**/
    /**END OF HOME PAGE**/

    /**START OF WORKS PAGE**/
    .picL {
        margin-right: 40%;
    }

    
    .picR {
        margin: 0 0 0 auto;
    }
    /**END OF WORKS PAGE**/

    /* #about-s1 {
        background-color: violet;
    } */
}

@media only screen and (min-width: 1440px) and (max-width: 1919px) { /*LARGE BREAKPOINT; 1440px wide and above*/  
    /**START OF HOME PAGE**/
    #home-cont nav {
        /* background-color: red; */
    }
    /**END OF HOME PAGE**/


    /**START OF WORKS PAGE**/
    .picL {
        margin-right: 40%;
    }
    
    .picR {
        margin: 0 0 0 auto;
    }
    /**END OF WORKS PAGE**/

    /**START OF ABOUT PAGE**/
    #about-s1 {
        /* background-color: yellow; */
    }

    #about-intro p {
        margin-left: 5vw;
        margin-right: 5vw;
    }
    /**END OF ABOUT PAGE**/
}

@media only screen and (min-width: 1024px) and (max-width: 1439px) { /*MEDIUM BREAKPOINT; 1024px wide and above*/  
    /**START OF HOME PAGE**/
    #home-cont nav {
        margin-top: 3.6vmax;
        /* background-color: lightgreen; */
    }

    #home-cont nav a:nth-child(1){
        font-size: 1.5vmax;
    }

    #home-cont nav a:nth-child(2){
        font-size: 2vmax;
    }

    #home-cont nav a:nth-child(3){
        font-size: 1.5vmax;
    }

    /**END OF HOME PAGE**/


    /**START OF WORKS PAGE**/
    .picL {
        margin-right: 40%;
    }
    
    .picR {
        margin: 0 0 0 auto;
    }
    /**END OF WORKS PAGE**/

    /**START OF ABOUT PAGE**/
    #about-s1 {
        /* background-color: red; */
    }
    /**END OF ABOUT PAGE**/
}

@media only screen and (min-width: 769px) and (max-width: 1023px) and (min-height: 376px) { /*TABLETS BREAKPOINT; 1023px wide and below*/ 
    /**START OF HOME PAGE**/
    #home-cont nav {
        margin-top: 3.6vmax;
        /* background-color: lightblue; */
    }
    .marketing_para, .market_para{
        font-size: small !important;
    
    }
    #home-cont nav a:nth-child(1){
        font-size: 1.5vmax;
    }

    #home-cont nav a:nth-child(2){
        font-size: 2vmax;
    }

    #home-cont nav a:nth-child(3){
        font-size: 1.5vmax;
    }

    #frame .base {
        width: 44vh;
        height: 61vh;
    }

    #frame .base:nth-child(1){
        left: 0vmax;
        top: 94%;
        display: none;
    }
    
    #frame .base:nth-child(2){
        top: 47%;
        margin-top: -33vh;
    }
    
    #frame .base:nth-child(3){
        right: 0vmax;
        top: -62%;
        display: none;
    }

    .award {
        width: 44vh;
        height: 61vh; /*66*/
        background-size: cover;
    }

    #belt div:nth-child(1) {
        top: 110%;
        transform: rotate(14deg);
    }
    
    #belt div:nth-child(2) {
        top: 110%;
        transform: rotate(14deg);
    }
    
    #belt div:nth-child(3) {
        top: 14%;
        transform: rotate(-10deg);
    }
    
    #belt div:nth-child(4) {
        right: 0vmax;
        top: -85%;
        transform: rotate(14deg);
    }
    
    @-webkit-keyframes spot1_next {
        0% { opacity: 0; top: 110%; margin-left: 0%; left: 0vmax; -webkit-transform: rotate(14deg); }
        100% { opacity: 1; top: 110%; margin-left: 0%; left: 0vmax; -webkit-transform: rotate(14deg); }
    }

    @-webkit-keyframes spot2_next {
        0% { opacity: 1; top: 110%; margin-left: 0%; left: 0vmax; -webkit-transform: rotate(14deg); }
        100% { opacity: 1; top: 14%; margin-left: 50%; left: -22vh; -webkit-transform: rotate(-10deg); }  
    } 

    @-webkit-keyframes spot3_next { 
        0% { opacity: 1; top: 14%; margin-left: 50%; left: -22vh; -webkit-transform: rotate(-10deg); } 
        100% { opacity: 1; top: -85%; margin-left: 100%; left: -44vh; -webkit-transform: rotate(14deg); } 
    } 

    @-webkit-keyframes spot4_next {
        0% { opacity: 1; top: -85%; margin-left: 100%; left: -44vh; -webkit-transform: rotate(14deg); }
        50% { opacity: 0; top: -85%; margin-left: 100%; left: -44vh; -webkit-transform: rotate(14deg); } 
        100% { opacity: 0; top: 110%; margin-left: 0%; left: 0vmax; -webkit-transform: rotate(14deg); }  
    } 

    @-webkit-keyframes spot1_prev {
        0% { opacity: 1; top: 110%; margin-left: 0%; left: 0vmax; -webkit-transform: rotate(14deg); } 
        100% { opacity: 0; top: 110%; margin-left: 0%; left: 0vmax; -webkit-transform: rotate(14deg); }
    }

    @-webkit-keyframes spot2_prev {
        0% { opacity: 1; top: 14%; margin-left: 50%; left: -22vh; -webkit-transform: rotate(-10deg); }
        100% { opacity: 1; top: 110%; margin-left: 0%; left: 0vmax; -webkit-transform: rotate(14deg); }
    } 

    @-webkit-keyframes spot3_prev { 
        0% { opacity: 1; top: -85%; margin-left: 100%; left: -44vh; -webkit-transform: rotate(14deg); }
        100% { opacity: 1; top: 14%; margin-left: 50%; left: -22vh; -webkit-transform: rotate(-10deg); }
    } 

    @-webkit-keyframes spot4_prev {
        0% { opacity: 0; top: 110%; margin-left: 0%; left: 0vmax; -webkit-transform: rotate(14deg); }
        10% { opacity: 0; top: -85%; margin-left: 100%; left: -44vh; -webkit-transform: rotate(14deg); }
        100% { opacity: 1; top: -85%; margin-left: 100%; left: -44vh; -webkit-transform: rotate(14deg); }
    } 

    #home-navSection {
        top: 90%;
        width: 40vmax;
        margin-left: -20vmax;
    }
    
    #nextSection {
        width: 14vmax; /*14vh*/
    }

    #nextSection div:nth-child(2){
        font-size: 3vmax;
    }
    
    #prevSection {
        width: 14vmax;
    }
    
    #prevSection div:nth-child(1){
        font-size: 3vmax;
    }

    #proj-info {
        display: none;
    }

    #home-proj-info-m {
        width: 100%;
        height: 8vmax;
        /* background-color: yellow; */
        position: absolute;
        z-index: -2;
        display: block;
        top: 81%;

        display: -webkit-flex;
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
        align-items: center;
    }

    #home-proj-info-m div:nth-child(1) {
        display: -webkit-flex;
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 10vmax;
        overflow: hidden;
    }

    .awardTitle_node_m {
        /* background-color: pink; */
        width: 100%;
        height: auto;
    
        font-weight: 600;
        font-size: 3vmax;
        text-align: center;
        display: table;
        vertical-align: middle;
    }

    #home-proj-info-m div:nth-child(2) {
        display: -webkit-flex;
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 10vmax;
        overflow: hidden;
    }

    .date_node_m {
        /* background-color: pink; */
        width: 100%;
        height: auto;
    
        color: var(--clr-secFont);
        font-weight: 600;
        font-size: 1.8vmax;
        text-align: center;
        display: table;
        vertical-align: middle;
    }

    #social-media {
        width: 12vmax;
        height: auto;
        flex-flow: row nowrap;
        position: absolute;
        left: 50%;
        top: 106%;
        margin-left: -6vmax;
    }

    /**END OF HOME PAGE**/


    /**START OF WORKS PAGE**/
    .works-btn {
        font-size: 1.5vw;
    }

    #works-backSection {
        width: 14vw;
        height: 3vw;
        top: 4.55vw;
    }

    #works-backSection div{
        background-size: 6.5vw 3vw;
        width: 7vw;
        height: 3vw;
    }

    #works-cont nav > a {
        top: 5vw;
    }

    .picL {
        margin-right: 40%;
    }
    
    .picR {
        margin: 0 0 0 auto;
    }
    /**END OF WORKS PAGE**/

    /**START OF ABOUT PAGE**/
    #about-s1 {
        /* background-color: orange; */
    }

    .about-btn {
        font-size: 1.5vw;
    }
    
    #about-backSection {
        width: 14vw;
        height: 3vw;
        top: 4.55vw;
    }

    #about-backSection div{
        background-size: 6.5vw 3vw;
        width: 7vw;
        height: 3vw;
    }

    #about-cont nav > a {
        top: 5vw;
    }
    
    #about-intro p {
        margin-left: 5vw;
        margin-right: 5vw;
    }
    
    #credits-content {
        width: 30vmax;
    }

    #credits-content p {
        font-size: 1.5vmax;
    }

    /**END OF ABOUT PAGE**/
}


@media only screen and (min-width: 479px) and (max-width: 768px) { /*MOBILE (LANDSCAPE) BREAKPOINT OR TABLET (PORTRAIT) BREAKPOINT; 768px wide and below*/  
    /**START OF HOME PAGE**/
    #home-cont nav {
        margin-top: 3.6vmax;
        /* background-color: yellow; */
    }
    #home-cont nav a:nth-child(1){
        margin-left: 2.5vmax;
        font-size: 2vmax;
    }

    #home-cont nav a:nth-child(2){
        font-size: 3vmax;
    }

    #home-cont nav a:nth-child(3){
        margin-right: 2.5vmax;
        font-size: 2vmax;
    }
    
    /**END OF HOME PAGE**/


    /**START OF WORKS PAGE**/
    .works-btn {
        font-size: 2vw;
    }

    #works-backSection {
        width: 14vw;
        height: 3vw;
        top: 4.55vw;
    }

    #works-backSection div{
        background-size: 6.5vw 3vw;
        width: 7vw;
        height: 3vw;
    }

    #works-cont nav > a {
        top: 5vw;
    }

    .picL {
        margin-right: 40%;
    }
    
    .picR {
        margin: 0 0 0 auto;
    }
    /**END OF WORKS PAGE**/

    /**START OF ABOUT PAGE**/

    .about-btn {
        font-size: 2vw;
    }
    
    #about-backSection {
        width: 14vw;
        height: 3vw;
        top: 4.55vw;
    }

    #about-backSection div{
        background-size: 6.5vw 3vw;
        width: 7vw;
        height: 3vw;
    }

    #about-cont nav > a {
        top: 5vw;
    }
    
    #about-intro p {
        margin-left: 8vw;
        margin-right: 8vw;
    }

    #about-s4 div:nth-child(1) {
        font-size: 2.5vmax;
    }
    
    #credits-content {
        width: 40vmax;
    }

    #credits-content p {
        font-size: 1.5vmax;
    }

    /**END OF ABOUT PAGE**/
}

@media screen and (min-width: 479px) and (max-width: 768px) and (min-height: 346px) { /*EXTRA: TABLET (PORTRAIT);*/

    .marketing_para, .market_para{
        font-size: medium !important;
    
    }
    #frame .base {
        width: 44vh;
        height: 61vh;
    }

    #frame .base:nth-child(1){
        left: 0vmax;
        top: 94%;
        display: none;
    }
    
    #frame .base:nth-child(2){
        top: 47%;
        margin-top: -33vh;
    }
    
    #frame .base:nth-child(3){
        right: 0vmax;
        top: -62%;
        display: none;
    }

    .award {
        width: 44vh;
        height: 61vh; /*66*/
        background-size: cover;
    }
    
    #belt div:nth-child(1) {
        top: 110%;
        transform: rotate(14deg);
    }
    
    #belt div:nth-child(2) {
        top: 110%;
        transform: rotate(14deg);
    }
    
    #belt div:nth-child(3) {
        top: 14%;
        transform: rotate(-10deg);
    }
    
    #belt div:nth-child(4) {
        right: 0vmax;
        top: -85%;
        transform: rotate(14deg);
    }
    
    @-webkit-keyframes spot1_next {
        0% { opacity: 0; top: 110%; margin-left: 0%; left: 0vmax; -webkit-transform: rotate(14deg); }
        100% { opacity: 1; top: 110%; margin-left: 0%; left: 0vmax; -webkit-transform: rotate(14deg); }
    }

    @-webkit-keyframes spot2_next {
        0% { opacity: 1; top: 110%; margin-left: 0%; left: 0vmax; -webkit-transform: rotate(14deg); }
        100% { opacity: 1; top: 14%; margin-left: 50%; left: -22vh; -webkit-transform: rotate(-10deg); }
    } 

    @-webkit-keyframes spot3_next {
        0% { opacity: 1; top: 14%; margin-left: 50%; left: -22vh; -webkit-transform: rotate(-10deg); }
        100% { opacity: 1; top: -85%; margin-left: 100%; left: -44vh; -webkit-transform: rotate(14deg); }
    } 

    @-webkit-keyframes spot4_next {
        0% { opacity: 1; top: -85%; margin-left: 100%; left: -44vh; -webkit-transform: rotate(14deg); }
        50% { opacity: 0; top: -85%; margin-left: 100%; left: -44vh; -webkit-transform: rotate(14deg); }
        100% { opacity: 0; top: 110%; margin-left: 0%; left: 0vmax; -webkit-transform: rotate(14deg); } 
    } 

    @-webkit-keyframes spot1_prev {
        0% { opacity: 1; top: 110%; margin-left: 0%; left: 0vmax; -webkit-transform: rotate(14deg); }
        100% { opacity: 0; top: 110%; margin-left: 0%; left: 0vmax; -webkit-transform: rotate(14deg); }
    }

    @-webkit-keyframes spot2_prev {
        0% { opacity: 1; top: 14%; margin-left: 50%; left: -22vh; -webkit-transform: rotate(-10deg); }
        100% { opacity: 1; top: 110%; margin-left: 0%; left: 0vmax; -webkit-transform: rotate(14deg); }
    } 

    @-webkit-keyframes spot3_prev {
        0% { opacity: 1; top: -85%; margin-left: 100%; left: -44vh; -webkit-transform: rotate(14deg); }
        100% { opacity: 1; top: 14%; margin-left: 50%; left: -22vh; -webkit-transform: rotate(-10deg); }
    } 

    @-webkit-keyframes spot4_prev {
        0% { opacity: 0; top: 110%; margin-left: 0%; left: 0vmax; -webkit-transform: rotate(14deg); } 
        10% { opacity: 0; top: -85%; margin-left: 100%; left: -44vh; -webkit-transform: rotate(14deg); }
        100% { opacity: 1; top: -85%; margin-left: 100%; left: -44vh; -webkit-transform: rotate(14deg); } 
    } 

    #home-navSection {
        top: 90%;
        width: 40vmax;
        margin-left: -20vmax;
    }
    
    #nextSection {
        width: 12vmax; /*14vh*/
    }

    #nextSection div:nth-child(2){
        font-size: 2.5vmax;
    }
    
    #prevSection {
        width: 12vmax;
    }
    
    #prevSection div:nth-child(1){
        font-size: 2.5vmax;
    }




    #proj-info {
        display: none;
    }

    #home-proj-info-m {
        width: 100%;
        height: 8vmax;
        /* background-color: yellow; */
        position: absolute;
        z-index: -2;
        display: block;
        top: 81%;

        display: -webkit-flex;
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
        align-items: center;
    }

    #home-proj-info-m div:nth-child(1) {
        display: -webkit-flex;
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 10vmax;
        overflow: hidden;
    }

    .awardTitle_node_m {
        /* background-color: pink; */
        width: 100%;
        height: auto;
    
        font-weight: 600;
        font-size: 3vmax;
        text-align: center;
        display: table;
        vertical-align: middle;
    }

    #home-proj-info-m div:nth-child(2) {
        display: -webkit-flex;
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 10vmax;
        overflow: hidden;
    }

    .date_node_m {
        /* background-color: pink; */
        width: 100%;
        height: auto;
    
        color: var(--clr-secFont);
        font-weight: 600;
        font-size: 1.8vmax;
        text-align: center;
        display: table;
        vertical-align: middle;
    }

    #social-media {
        width: 12vmax;
        height: auto;
        flex-flow: row nowrap;
        position: absolute;
        left: 50%;
        top: 106%;
        margin-left: -6vmax;
    }
}



/* Footer */
footer{
    background: black;
    margin-bottom: 0px;
}
.footer_head{
    font-size: 3vw;
    color: white;
    text-align: center;
}
.heading_voice,.recreate_vission{
    font-size: 2vw;
    color: white;
}
.footerfacebook_icon{
    width: 2vw;
}
.border_bootom{
    width: 95% ;
    height: 5px;
    background-color: white;
}
.footer_relative{
    border-bottom: 2px solid white;
}
.follow_footerhead{
    font-size: 1.9vw;
    color: white;
    text-transform: uppercase;
}
.footer_numbarPara{
    color: white;
    text-decoration: none;
    font-size: 1vw;
}
.footer_numbarPara:hover{
    color:white
}
.footer_feedback{
    width: 40%;
    position: relative;
}
.hover_fame{
    position: absolute;
    width: 3vw;
    top: -2%;
    right: 0%;
    display: none;
}
.footer_feedback:hover .hover_fame{
    display: block;
}
.camera_fit{
    width: 100%;
}
.click{
    width: 30%;
    position: absolute;
    left: 52%;
    top: 60%;
    transform: translate(-60%,-50%);
}
.links_parra{
    font-size: 1vw;
    color: white;
    text-decoration: none;
    list-style: none;
}
.links_parra:hover{
    color: white;
    text-decoration: none;
    list-style: none;
}
.links_footer{
    list-style: none;
}
.quicks_heads{
    color: white;
    font-size: 1.5vw;
}
.footer_end{
    font-size: 1vw;
    color: white;
    margin-bottom: 0px;
    padding: 5px;

}
.footer_end1{
    font-size: 1vw;
    color: white;
    margin-bottom: 0px;
    padding: 5px;

}


/* services */
#services{
background: #000000;
}
.logo{
    width: 8vw;
}
.services_head{
    font-size: 4vw;
    color: white;
}
.service_what{
    font-size: 7vw;
    text-align: end;
    color: white;
    font-weight: 0;
}
.service_port1{
    background-image: url(../images/services/01.webp);
    background-attachment: fixed,fixed;
    background-repeat: no-repeat;
    background-size:contain;
    width: 100%;
    position: relative;
    min-height:90vh;
}
.service_port3{
    background-image: url(../images/services/03.webp);
    background-attachment: fixed,fixed;
    background-repeat: no-repeat;
    background-size:contain;
    width: 100%;
    position: relative;
    min-height:90vh;
}
.service_port2{
    background-image: url(../images/services/02.webp);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center right; 
    background-attachment: fixed;
    width: 100%;
    min-height: 90vh;
    z-index: 1;
}
.service_port4{
    background-image: url(../images/services/04.webp);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center right; 
    background-attachment: fixed;
    width: 100%;
    min-height: 90vh;
    z-index: 1;
}
.service_port5{
    background-image: url(../images/services/05.webp);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center right; 
    background-attachment: fixed;
    width: 100%;
    min-height: 90vh;
    z-index: 1;
}
.servwed_haed{
    font-size: 3vw;
    color: white;
}
.servwed_parra{
    font-size: 1.9vw;
    color: white;
}
.service_relative{
    position: relative;
    min-height: 90vh;
}


/* navbar */

.hamburger_menu{
width: 3vw;
height: 3vw;
    background-color: white;
    border-radius: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all .5s ease-in-out;
    position: relative;
   }
   .fa-bars{
       font-size: 1.5vw;
       color: black;
       cursor: pointer;
       display: flex;
       justify-content: center;
       align-items: center;
   }
   .hamburger_menu1{
       width: 10vw;
       background-color: #2b2b2b65;
       height: 15vw;
       padding: 10px;
       position: relative;
       border-radius: 10px;
       transition: all .5s ease-in-out;
   }
   .hamburger_menu1 .fa-bars{
       display: none;
   }
   .link_navbar{
       font-size: 1vw;
       text-decoration: none;
       color: white;
       margin-bottom: 0px;
   }
   .link_navbar:hover{
    color: white;
   }
   .text_apart{
       display: none;

   }
   .hamburger_menu1 .text_apart  {
    display: block;
    padding: 10px;
   }
  
   .fa-x{
    font-size: 1.8vw;
    color: white;
    display: none;
    text-align: center;
    cursor: pointer;
    margin: auto;
}
   .hamburger_menu1 .fa-x  {
    display: block;
   }
   .navbar_bottom{
       margin-bottom: 0px;
       margin-top: 1vw;
       text-align: center;
   }
   .relative_phase{
    position: relative;
   }
   .absolute_navbar{
    position: absolute;
    top: 2vw;
    right: 0px;
   }
   .absolute_navbar1{
    position: absolute;
    top: 2vw;
    right: 0px;
   }



   /* Portfolio navbar */

   .hamburger_menus{
    width: 3vw;
    height: 3vw;
    background-color: white;
    border-radius: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all .5s ease;
    position: relative;
    z-index: 999;
   }
   .ham_nav{
       font-size: 2vw;
       color: black;
       cursor: pointer;
       display: flex;
       justify-content: center;
       align-items: center;
   }
   .hamburger_menu2{
       width: 30vw;
       height: 3vw;
       background-color: #2b2b2b8e;
       padding: 10px;
       position: relative;
       border-radius: 10px;
       transition: all .5s ease;
   }
   .hamburger_menu2 .ham_nav{
       display: none;
   }
   .link_navbar1{
       font-size: 1vw;
       text-decoration: none;
       color: white;
       margin-bottom: 0px;
   }
   .link_navbar1:hover{
    color: white;
   }
   .text_apart1{
       display: none;
       opacity: 0;
       transition: all 1s ease;

   }
   .hamburger_menu2 .text_apart1  {
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
    transition: all 1s ease;
   }
  
   .closed_navbar{
       font-size: 1.2vw;
       color: white;
       display: none;
       cursor: pointer;
   }
   .hamburger_menu2 .closed_navbar  {
    display: block;
   }
   .navbar_bottom1{
       margin-bottom: 0px;
   }
.logo_navbar{
width: 3vw;
}
.absolutePort_navbar{
    position: absolute;
    left: 5%;
}



   /* Home */

   .main-slider {
    position: relative;
    width: 100%;
    height: 100vh;
    margin-bottom: 50px;
    opacity: 0;
    visibility: hidden;
    transition: all 1.2s ease;
  }
  .main-slider.slick-initialized {
    opacity: 1;
    visibility: visible;
  }
  .slick-slide {
    position: relative;
    height: 100vh;
  }
  .slick-slide .slide-image {
    opacity: 0;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: all 0.8s ease;
  }
  .slick-slide .slide-image.show {
    opacity: 1;
  }
  .slick-slide .image-entity {
    width: 100%;
    opacity: 0;
    visibility: hidden;
  }
  .slick-slide .loading {
    position: absolute;
    top: 44%;
    left: 0;
    width: 100%;
  }
  .slick-slide.slick-active {
    z-index: 1;
  }
  .slick-slide.slick-active .caption {
    opacity: 1;
    transform: translateY(0);
    transition: all 0.7s cubic-bezier(0.32, 0.34, 0, 1.62) 0.6s;
  }
  .caption_heading{
     position: absolute;
    top: 80%;
    width: 100%;
    left: 50%;
    transform: translate(-50%,-80%);  
  }
  .caption {
    text-align: center;
    padding: 20px;
    color: #fff;
    opacity: 0;
    z-index: 1;
    transition: all 1.5s ease;
    transform: translateY(-200px);
  }
  
  
  .absolute_header{
     background: url(../images/home/slide1.webp);
     background-position: center;
     background-repeat: repeat;
     background-size: cover;
     min-height: 100vh;
     position: relative;
  }
  
  .absolute_header1{
     background: url(../images/home/slide2.webp);
     background-position: center;
     background-repeat: repeat;
     background-size: cover;
     min-height: 100vh;
  }
  
  .absolute_header2{
     background: url(../images/home/slide3.webp);
     background-position: center;
     background-repeat: repeat;
     background-size: cover;
     min-height: 100vh;
  }
  
  .absolute_header3{
     background: url(../images/home/slide4.webp);
     background-position: center;
     background-repeat: repeat;
     background-size: cover;
     min-height: 100vh;
  }
  
  .absolute_header4{
     background: url(../images/home/slide5.webp);
     background-position: center;
     background-repeat: repeat;
     background-size: cover;
     min-height: 100vh;
  }
  .heading_home{
      font-size: 5vw;
      width: 100%;
      color: linear-gradient(180deg, #FFFFFF 6.33%, rgba(255, 255, 255, 0) 100%);
  
  }
  .heading_para{
      font-size: 1.3vw;
      text-align: start;
      width: 55%;
      margin: 0 auto;
      text-align: center;
      font-weight: 400;
      z-index: 999;
  }
  .home_bannerHead .slick-dots{
      list-style-type: none;
  }
  .home_bannerHead .slick-dots {
      display: flex !important;
    justify-content: center;
    align-items:center ;
     position: absolute;
      bottom: 0%;
      left: 50%;
      transform: translate(-50%,-50%);
     border: none !important;
      outline: none !important;
  }
  .home_bannerHead .slick-dots button{
      background-color: transparent;
      border: none;
      border: 1px solid white;
      outline: none;
      font-size: .1vw;
      padding: 1px 30px;
      border-radius: 12px;
      margin: 5px;
  }
  .home_bannerHead .slick-dots .slick-active button{
      background-color: #ffff;
      
  }
  .relative_homess{
      position: relative;
  }
  .absoluet_navbar{
      position: fixed !important;
      top: 0px !important;
      z-index: 999 !important;
      width: 100%;
  }
  .heading_para{
      font-size: 1.2vw;
      color: white;
  }
  .about_bac{
    background: url(../images/home/about_bac.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  padding: 10px;
  margin-top: 5%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .aboutImages{
    width: 30vw;
  }
  .about_head{
    font-size: 3vw; 
    color: white;
  }
  .about_subhead{
     font-size: 3.5vw;
     color: white;
     text-transform: uppercase;
     font-weight: 500;
  }
  .yellow_color{
     color: yellow;
  }
  .about_para{
     color: white;
     font-size: 1.2vw;
  }


  .containers {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.item {
    flex-grow: 1;
    border-radius: 10px;
    height: 25vw;
    width: 10vw;
    object-fit:cover;
    position: relative;
    border: 1px solid #1a1a1a;
    transition: all .9s ease;
}
.item:hover {
    flex-grow: 3;
}
.item:before {
    content: attr(data-order);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
}
.homeservice_head{
    font-size: 3vw;
    color: white;
}
.hightligh_bac{
    position: relative;
    margin-top: 5%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    transition: all 0.5s ease;
}

.high_images{
    background: url(../images/home/1.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 70vh;
    transition: all 0.5s ease-in-out;
}
.high_images1{
    background: url(../images/home/2.webp);
    background-size: cover;
    background-position: center;
    min-height: 70vh;
    transition: all 0.5s ease-in-out;
}
.high_images2{
    background: url(../images/home/3.webp);
    background-size: cover;
    background-position: center;
    min-height: 35vh;
    transition: all 0.5s ease-in-out;

}
.high_images3{
    background: url(../images/home/4.webp);
    background-size: cover;
    background-position: center;
    min-height: 35vh;
    transition: all 0.5s ease-in-out;
}


.high_images4{
    background: url(../images/home/5.webp);
    background-size: cover;
    min-height: 35vh;
    transition: all 0.5s ease-in-out;
}
.hightligh_bac:hover .high_images, .hightligh_bac:hover .high_images1, .hightligh_bac:hover .high_images2, .hightligh_bac:hover .high_images3, .hightligh_bac:hover .high_images4{
    box-shadow: inset 0px 0px 0px 2000px #00000099;
    transition: all 0.5s ease-in-out;
}
.highlight_para{
    position: absolute;
    left: 50%;
    top: 50%;
    font-weight: 700;
    text-transform: uppercase;
    transform: translate(-50%,-50%);
    color: white;
    font-size: 5vw;
    border-bottom: 3px solid white;
    padding: 10px;
    display: none;
    transition: all 0.9s ease-in-out;
}
.hightligh_bac:hover .highlight_para, .hightligh_bac:hover .highlight_para, .hightligh_bac:hover .highlight_para, .hightligh_bac:hover .highlight_para, .hightligh_bac:hover .highlight_para{
    display: block;
    transition: all 5s ease-in-out;
}

.white_container{
    background: white;
    padding:50px 50px;
}
.precision_head{
    color: black;
    font-size: 3vw;
}
.precision_parra{
    font-size: 1.3vw;
    color: #000000;
}
.home_largerHead{
    font-size: 7vw;
    color: white;
}
.overflow_hiddencontainer{
    overflow-y: hidden !important;
}


/* Contact */

#regForm {
    margin: 0px auto;
    padding: 40px;
    position: relative;
    width: 80%;
    margin-top: 10%;
    min-width: 300px;
  }
  
  input {
   border: none;
   outline: none;
   border-bottom: none;
   background: transparent;
   width: 100%;
   border-bottom: 2px solid white;
   color: white;
   padding: 10px;
   font-size: 4vw;
  }
  
  .tab {
    display: none;
  }
  
  .button_contacts {
   padding: 10px;
   width: 6vw;
   height: 6vw;
   background: transparent;
   color: white;
   font-size: 1vw;
   border: none;
   border: 2px solid white;
   border-radius: 50%;
    cursor: pointer;
  }
  
  button:hover {
    opacity: 0.8;
  }
  
  #prevBtn {
    background-color: transparent;
  }
  
  /* Make circles that indicate the steps of the form: */
  .step {
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbbbbb;
    border: none;  
    border-radius: 50%;
    display: inline-block;
    opacity: 0.5;
  }
  
  .step.active {
    opacity: 1;
  }
  
  /* Mark the steps that are finished and valid: */
  .step.finish {
    background-color: #04AA6D;
  }
  .error_input{
      display: none;
  }
  .error_input.invalid{
      color: #f56565;
      font-size: 1vw;
      display: block;
  }
  
  .tab input.invalid:hover .error_input{
      display: block !important;
  }
  .contact_bac{
      background: url(./images/contact/conbac.webp);
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
      min-height: 60vh;
  }
  .contact_bac1{
      background: url(../images/contact/conbac.webp);
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  .contact_bac2{
      background: url(../images/contact/conbac.webp);
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
  }

  .success_messages{
    color: white;
    font-size: 3vw;
    margin-top: 10%;
  }
  .numbers{
      color: white;
      font-size: 2vw;
  }
  .btnprevnext{
      display: flex;
      justify-content: end;
      margin-top: 3%;
  }
  .bi-chevron-right{
      color: white;
  }
  #contact_footer{
  background: transparent;
  }
  
  #submit_button{
    display: none;
  }
  .button_contactPhotography{
    background: transparent;
    outline: none;
    border: none;
    font-size: 3vw;
    color: white;
    opacity: 0.5;
    cursor: pointer;
  }
  .button_contactPhotography:hover{
    opacity: 1;
  }
  .range-slider {
       width: 100%;
       text-align: start;
       position: relative;
     font-size: 3vw;
     color: white;
  }
   .range-slider .rangeValues {
       display: block;
  }
   input[type=range] {
       -webkit-appearance: none;
   border: none;
       width: 100%;
       position: absolute;
       left: 0;
  }
   input[type=range]::-webkit-slider-runnable-track {
       width: 300px;
       height: 5px;
       background: #ddd;
       border: none;
       border-radius: 3px;
  }
   input[type=range]::-webkit-slider-thumb {
       -webkit-appearance: none;
       border: none;
       height: 16px;
       width: 16px;
       border-radius: 50%;
       background: #21c1ff;
       margin-top: -4px;
       cursor: pointer;
       position: relative;
       z-index: 1;
  }
   input[type=range]:focus {
       outline: none;
  }
   input[type=range]:focus::-webkit-slider-runnable-track {
       background: #fff;
  }
  input[type=range]::-webkit-slider-thumb::after {
    content: 'test';
    color: red;
  }
  input[type=range]::-webkit-slider-thumb::before {
    content: 'test';
    color: red;
  }
   input[type=range]::-moz-range-track {
       width: 300px;
       height: 5px;
       background: #fff;
       border: none;
       border-radius: 3px;
  }
   input[type=range]::-moz-range-thumb {
       border: none;
       height: 16px;
       width: 16px;
       border-radius: 50%;
       background: #21c1ff;
  }
  /*hide the outline behind the border*/
   input[type=range]:-moz-focusring {
       outline: 1px solid white;
       outline-offset: -1px;
  }
   input[type=range]::-ms-track {
       width: 1000px;
       height: 5px;
       background: transparent;
      /*leave room for the larger thumb to overflow with a transparent border */
       border-color: transparent;
       border-width: 6px 0;
      /*remove default tick marks*/
       color: transparent;
       z-index: -4;
  }
   input[type=range]::-ms-fill-lower {
       background: #0000;
       border-radius: 10px;
  }
   input[type=range]::-ms-fill-upper {
       background: #0000;
       border-radius: 10px;
  }
   input[type=range]::-ms-thumb {
       border: none;
       height: 16px;
       width: 16px;
       border-radius: 50%;
       background: #21c1ff;
  }
   input[type=range]:focus::-ms-fill-lower {
       background: #000;
  }
   input[type=range]:focus::-ms-fill-upper {
       background: #000;
  }
   .contact_formhead{
    color: white;
    font-size: 2vw;
   }
   .dates{
    color: white;
   }
   input {
    color-scheme: dark;
  }
  .anchor_hightlights{
    text-decoration: none;
    color: inherit;
  }
  .anchor_hightlights:hover{
    color: inherit;
  }
  .last_foundservice{
    min-height: 60vh;
    padding-bottom:10px ;
  }

  @media only screen and (max-width: 992px) {
    body {
        font-family: 'Abhaya Libre', serif;
        overflow-x: hidden !important;
        background: #000000;
    
    }
    .caption_heading{
        top: 65%;
    }
    .home_bannerHead .slick-dots {
    bottom: 10%;
    left: 45%;
    }
    .home_bannerHead .slick-dots button{
        padding: 0.2vw 4vw;
    }
     .high_images, .high_images1,.high_images2,.high_images3,.high_images4{
        box-shadow: inset 0px 0px 0px 2000px #00000099;
    }
    .success_messages{
        color: white;
        font-size: 6vw;
        margin-top: 10%;
      }
    .absolute_navbar{
        top: 5vw !important;
    }
    .scroll-top{
        display: none !important;
    }
    .absoluet_navbar{
        position: fixed !important;
        top: 0px !important;
        z-index: 999 !important;
    }
    .logo {
    width: 18vw;
    }
    .button_contactPhotography{
        font-size: 4vw;
    }
    .hamburger_menu{
        width: 8vw;
        height: 8vw;

    }
.fa-bars{
    font-size: 4vw;
}
.heading_home {
font-size: 8vw;
}
.heading_para{
    font-size: 3vw;
    width: 80%;
}
.about_head{
    font-size: 7vw;
    text-align: center;
}
.about_subhead{
    font-size: 5vw;
    text-align: center;
}
.about_para{
    text-align: center;
    font-size: 3vw;
}
.homeservice_head{
   font-size:7vw;
}
.containers{
    flex-direction: column;
    border: none;
}
.item{
    flex: 0;
    height: 100%;
    width: 100%;
}
.item:hover{
    flex: 3;
}

.hightligh_bac .highlight_para{
    display: block;
    font-size: 8vw;
}
.hightligh_bac{
    box-shadow: inset 0px 0px 0px 2000px rgba(0, 0, 0, 0.534);
    transition: all 0.5s ease;
}
.home_largerHead{
    font-size: 13vw;
}
.precision_head{
    font-size: 6vw;
    text-align: center;
}
.precision_parra{
    font-size: 3vw;
    text-align: center;
}


/* Footer */
.footer_head{
  font-size: 7vw;  
}
.heading_voice, .recreate_vission{
    font-size: 5vw;
}
.follow_footerhead{
    font-size: 4vw;
    text-align: center;
}
.footerfacebook_icon {
    width: 5vw;
}
.phone_footericon{
    width: 6vw;
}
.footer_numbarPara{
font-size: 3vw;
}
.camera_fit{
    margin: 0 auto;
}
.footer_feedback{
    margin: 0 auto;
}
.hover_fame{
    display: block;
    width: 10vw;
    top: 4%;
}
.quicks_heads{
    font-size: 5vw;
    text-align: center;
}
.links_parra{
    text-align: center;
    font-size: 4vw;
}
.footer_end,.footer_end1{
    font-size: 3vw;
    text-align: center;
}

.hamburger_menu1{
    width: 30vw;
    background-color: #2b2b2b65;
    height: 40vw;
    padding: 10px;
    position: relative;
    border-radius: 10px;
    transition: all .5s ease-in-out;
}
.fa-x{
    font-size: 5vw;
}
.link_navbar{
    font-size: 3vw;
}


/* services */

.services_head{
    font-size: 10vw;
}
.service_what{
    margin-top: 6%;
}
.service_port1,.service_port2,.service_port3,.service_port4,.service_port5 {
    min-height: 50vh;
    background-position: center;
}
.servwed_haed{
    font-size: 6vw;
}
.servwed_parra{
    font-size: 3vw;
}




/* portfolio */

.award {
    width: 44vh;
    height: 61vh; /*66*/
  
    background-size: cover;
}

#belt div:nth-child(1) {
    top: 110%;
    transform: rotate(14deg);
}

#belt div:nth-child(2) {
    top: 110%;
    transform: rotate(14deg);
}

#belt div:nth-child(3) {
    top: 14%;
    transform: rotate(-10deg);
}

#belt div:nth-child(4) {
    right: 0vmax;
    top: -85%;
    transform: rotate(14deg);
}

@-webkit-keyframes spot1_next {
    0% { opacity: 0; top: 110%; margin-left: 0%; left: 0vmax; -webkit-transform: rotate(14deg); }
    100% { opacity: 1; top: 110%; margin-left: 0%; left: 0vmax; -webkit-transform: rotate(14deg); }
}

@-webkit-keyframes spot2_next {
    0% { opacity: 1; top: 110%; margin-left: 0%; left: 0vmax; -webkit-transform: rotate(14deg); } 
    100% { opacity: 1; top: 14%; margin-left: 50%; left: -22vh; -webkit-transform: rotate(-10deg); } 
} 

@-webkit-keyframes spot3_next { 
    0% { opacity: 1; top: 14%; margin-left: 50%; left: -22vh; -webkit-transform: rotate(-10deg); } 
    100% { opacity: 1; top: -85%; margin-left: 100%; left: -44vh; -webkit-transform: rotate(14deg); }
} 

@-webkit-keyframes spot4_next {
    0% { opacity: 1; top: -85%; margin-left: 100%; left: -44vh; -webkit-transform: rotate(14deg); } 
    50% { opacity: 0; top: -85%; margin-left: 100%; left: -44vh; -webkit-transform: rotate(14deg); } 
    100% { opacity: 0; top: 110%; margin-left: 0%; left: 0vmax; -webkit-transform: rotate(14deg); }
} 

@-webkit-keyframes spot1_prev {
    0% { opacity: 1; top: 110%; margin-left: 0%; left: 0vmax; -webkit-transform: rotate(14deg); }
    100% { opacity: 0; top: 110%; margin-left: 0%; left: 0vmax; -webkit-transform: rotate(14deg); }
}

@-webkit-keyframes spot2_prev {
    0% { opacity: 1; top: 14%; margin-left: 50%; left: -22vh; -webkit-transform: rotate(-10deg); }
    100% { opacity: 1; top: 110%; margin-left: 0%; left: 0vmax; -webkit-transform: rotate(14deg); }
} 

@-webkit-keyframes spot3_prev {
    0% { opacity: 1; top: -85%; margin-left: 100%; left: -44vh; -webkit-transform: rotate(14deg); }
    100% { opacity: 1; top: 14%; margin-left: 50%; left: -22vh; -webkit-transform: rotate(-10deg); }
} 

@-webkit-keyframes spot4_prev {
    0% { opacity: 0; top: 110%; margin-left: 0%; left: 0vmax; -webkit-transform: rotate(14deg); }
    10% { opacity: 0; top: -85%; margin-left: 100%; left: -44vh; -webkit-transform: rotate(14deg); }
    100% { opacity: 1; top: -85%; margin-left: 100%; left: -44vh; -webkit-transform: rotate(14deg); }
} 

#home-navSection {
    top: 90%;
    width: 80vw;
    margin-left: -40vw;
    
}

#nextSection {
    width: 14vmax; /*14vh*/
}

#nextSection div:nth-child(2){
    font-size: 3vmax;
}

#prevSection {
    width: 14vmax;
}

#prevSection div:nth-child(1){
    font-size: 3vmax;
}

#proj-info {
    display: none;
    opacity: 0;
}

#home-proj-info-m {
display: none;
}

#home-proj-info-m div:nth-child(1) {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 10vmax;
    overflow: hidden;
}

.awardTitle_node_m {
    /* background-color: pink; */
    width: 100%;
    height: auto;

    font-weight: 600;
    font-size: 3vmax;
    text-align: center;
    display: table;
    vertical-align: middle;
}

#home-proj-info-m div:nth-child(2) {
    display: -webkit-flex;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 10vmax;
    overflow: hidden;
}

.date_node_m {
    /* background-color: pink; */
    width: 100%;
    height: auto;

    color: var(--clr-secFont);
    font-weight: 600;
    font-size: 1.8vmax;
    text-align: center;
    display: table;
    vertical-align: middle;
}

#social-media {
    width: 12vmax;
    height: auto;
    flex-flow: row nowrap;
    position: absolute;
    left: 50%;
    top: 106%;
    margin-left: -6vmax;
}
/**END OF HOME PAGE**/

.text_particles{
    top: 80%;
    right: 0%;
}
.para_portfolio {
    color: white;
    font-size: 4vw;
    text-align: center;
    width: 100%;
}
.prev_standard {
    color: white;
    font-size: 8.8vw !important;
}
.hamburger_menus{
    width: 10vw !important;
    height: 10vw !important;
}
.hamburger_menu2{
    width: 86vw !important;
}
.logo_navbar{
    width: 8vw !important;
}
.link_navbar1{
    font-size: 3vw !important;
}
.fa-x{
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}


/* contact */

#regForm{
    width: 100%;
    margin-top: 30%;
}
input{
    font-size: 6vw;
}
.error_input.invalid{
    font-size: 3vw;
}
.numbers{
    font-size: 4vw;
}
.button_contacts{
    width: 15vw;
    height: 15vw;
    font-size: 3vw;
}
.contact_bac{
    min-height: 60vh;
}
.contact_formhead{
    font-size: 4vw;
}
.range-slider{
    font-size: 3w;
}
.btnprevnext {
    margin-top: 7%;
}
  }

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

    .marketing_para, .market_para{
        font-size: medium !important;
    
    }
    .absolute_navbar{
        top: 5vw !important;
    }
    .absoluet_navbar{
        position: fixed !important;
        top: 0px !important;
        z-index: 999 !important;
    }
    .logo {
    width: 25vw;
    }
    .hamburger_menu{
        width: 12vw;
        height: 12vw;

    }
    .success_messages{
        color: white;
        font-size: 7vw;
        margin-top: 20%;
      }
.fa-bars{
    font-size: 6vw;
}
.heading_home {
font-size: 10vw;
}
.heading_para{
    font-size: 4vw;
    text-align: center;
    width: 80%;
}
.about_head{
    font-size: 9vw;
    text-align: center;
}
.about_subhead{
    font-size: 7vw;
    text-align: center;
}
.about_para{
    text-align: center;
    font-size: 5vw;
}
.homeservice_head{
   font-size:9vw;
}
.containers{
    flex-direction: column;
    border: none;
}
.item{
    flex: 0;
    height: 100%;
    width: 100%;
}
.item:hover{
    flex: 3;
}
.aboutImages{
    width: 60vw;
}
.hightligh_bac .highlight_para{
    display: block;
    font-size: 9vw;
}
.hightligh_bac{
    box-shadow: inset 0px 0px 0px 2000px rgba(0, 0, 0, 0.534);
    transition: all 0.5s ease;
}
.home_largerHead{
    font-size: 13vw;
}
.precision_head{
    font-size: 7vw;
    text-align: center;
}
.precision_parra{
    font-size: 4vw;
    color: black;
    text-align: center;
}
.hamburger_menu1{
    width: 30vw;
    background-color: #2b2b2b65;
    height: 50vw;
    padding: 10px;
    position: relative;
    border-radius: 10px;
    transition: all .5s ease-in-out;
}
.fa-x{
    font-size: 6vw;
}
.link_navbar{
    font-size: 4vw;
}

/* Footer */
.footer_head{
    font-size: 9vw;  
  }
  .heading_voice, .recreate_vission{
      font-size: 5vw;
      text-align: center;
  }
  .follow_footerhead{
      font-size: 7vw;
      text-align: center;
  }
  .footerfacebook_icon {
      width: 8vw;
  }
  .phone_footericon{
      width: 8vw;
  }
  .footer_numbarPara{
  font-size: 4vw;
  }
  .camera_fit{
      margin: 0 auto;
  }
  .footer_feedback{
      margin: 0 auto;
  }
  .hover_fame{
      display: block;
      width: 10vw;
      top: 4%;
  }
  .quicks_heads{
      font-size: 5vw;
      text-align: center;
  }
  .links_parra{
      text-align: center;
      font-size: 4vw;
  }
  .footer_end,.footer_end1{
      font-size: 3vw;
  }

  
/* services */

.services_head{
    font-size: 10vw;
}
.service_what{
    margin-top: 6%;
}
.service_port1,.service_port2,.service_port3,.service_port4,.service_port5 {
    min-height: 50vh;
    background-position: center;
}
.servwed_haed{
    font-size: 7vw;
}
.servwed_parra{
    font-size: 4vw;
}


/* portfolio */

.award {
    width: 44vh;
    height: 61vh; /*66*/
  
    background-size: cover;
}

#belt div:nth-child(1) {
    top: 110%;
    transform: rotate(14deg);
}

#belt div:nth-child(2) {
    top: 110%;
    transform: rotate(14deg);
}

#belt div:nth-child(3) {
    top: 14%;
    transform: rotate(-10deg);
}

#belt div:nth-child(4) {
    right: 0vmax;
    top: -85%;
    transform: rotate(14deg);
}

@-webkit-keyframes spot1_next {
    0% { opacity: 0; top: 110%; margin-left: 0%; left: 0vmax; -webkit-transform: rotate(14deg); }
    100% { opacity: 1; top: 110%; margin-left: 0%; left: 0vmax; -webkit-transform: rotate(14deg); }
}

@-webkit-keyframes spot2_next {
    0% { opacity: 1; top: 110%; margin-left: 0%; left: 0vmax; -webkit-transform: rotate(14deg); } 
    100% { opacity: 1; top: 14%; margin-left: 50%; left: -22vh; -webkit-transform: rotate(-10deg); } 
} 

@-webkit-keyframes spot3_next { 
    0% { opacity: 1; top: 14%; margin-left: 50%; left: -22vh; -webkit-transform: rotate(-10deg); } 
    100% { opacity: 1; top: -85%; margin-left: 100%; left: -44vh; -webkit-transform: rotate(14deg); }
} 

@-webkit-keyframes spot4_next {
    0% { opacity: 1; top: -85%; margin-left: 100%; left: -44vh; -webkit-transform: rotate(14deg); } 
    50% { opacity: 0; top: -85%; margin-left: 100%; left: -44vh; -webkit-transform: rotate(14deg); } 
    100% { opacity: 0; top: 110%; margin-left: 0%; left: 0vmax; -webkit-transform: rotate(14deg); }
} 

@-webkit-keyframes spot1_prev {
    0% { opacity: 1; top: 110%; margin-left: 0%; left: 0vmax; -webkit-transform: rotate(14deg); }
    100% { opacity: 0; top: 110%; margin-left: 0%; left: 0vmax; -webkit-transform: rotate(14deg); }
}

@-webkit-keyframes spot2_prev {
    0% { opacity: 1; top: 14%; margin-left: 50%; left: -22vh; -webkit-transform: rotate(-10deg); }
    100% { opacity: 1; top: 110%; margin-left: 0%; left: 0vmax; -webkit-transform: rotate(14deg); }
} 

@-webkit-keyframes spot3_prev {
    0% { opacity: 1; top: -85%; margin-left: 100%; left: -44vh; -webkit-transform: rotate(14deg); }
    100% { opacity: 1; top: 14%; margin-left: 50%; left: -22vh; -webkit-transform: rotate(-10deg); }
} 

@-webkit-keyframes spot4_prev {
    0% { opacity: 0; top: 110%; margin-left: 0%; left: 0vmax; -webkit-transform: rotate(14deg); }
    10% { opacity: 0; top: -85%; margin-left: 100%; left: -44vh; -webkit-transform: rotate(14deg); }
    100% { opacity: 1; top: -85%; margin-left: 100%; left: -44vh; -webkit-transform: rotate(14deg); }
} 

#home-navSection {
    top: 90%;
    width: 80vw;
    margin-left: -40vw;
    
}

#nextSection {
    width: 14vmax; /*14vh*/
}

#nextSection div:nth-child(2){
    font-size: 3vmax;
}

#prevSection {
    width: 14vmax;
}

#prevSection div:nth-child(1){
    font-size: 3vmax;
}

#proj-info {
    display: none;
    opacity: 0;
}

#home-proj-info-m {
display: none;
}

#home-proj-info-m div:nth-child(1) {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 10vmax;
    overflow: hidden;
}

.awardTitle_node_m {
    /* background-color: pink; */
    width: 100%;
    height: auto;

    font-weight: 600;
    font-size: 3vmax;
    text-align: center;
    display: table;
    vertical-align: middle;
}

#home-proj-info-m div:nth-child(2) {
    display: -webkit-flex;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 10vmax;
    overflow: hidden;
}

.date_node_m {
    /* background-color: pink; */
    width: 100%;
    height: auto;

    color: var(--clr-secFont);
    font-weight: 600;
    font-size: 1.8vmax;
    text-align: center;
    display: table;
    vertical-align: middle;
}

#social-media {
    width: 12vmax;
    height: auto;
    flex-flow: row nowrap;
    position: absolute;
    left: 50%;
    top: 106%;
    margin-left: -6vmax;
}
/**END OF HOME PAGE**/

.text_particles{
    top: 80%;
    right: 0%;
}
.para_portfolio {
    color: white;
    font-size: 4vw;
    text-align: center;
    width: 100%;
}
.prev_standard {
    color: white;
    font-size: 8.8vw !important;
}
.hamburger_menus{
    width: 10vw !important;
    height: 10vw !important;
}
.hamburger_menu2{
    width: 86vw !important;
}
.logo_navbar{
    width: 8vw !important;
}
.link_navbar1{
    font-size: 3vw !important;
}
.fa-x{
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}


/* contact */

#regForm{
    width: 100%;
    padding: 20px;
    margin-top: 50%;
}
input{
    font-size: 6vw;
}
.error_input.invalid{
    font-size: 3vw;
    margin-top: 2%;
}
.numbers{
    font-size: 4vw;
}
.button_contacts{
    width: 15vw;
    height: 15vw;
    font-size: 3vw;
}
.contact_bac{
    min-height: 60vh;
}
.contact_formhead{
    font-size: 4vw;
}
.range-slider{
    font-size: 3w;
}
.btnprevnext {
    margin-top: 7%;
}
.button_contactPhotography{
    font-size: 5vw;
}
  }