body{
	text-align: center;
	font-family: montserrat;
	color: #ffffff;
}


/* BACKGROUND IMAGE */
#background1 .background1{
	background-repeat: no-repeat;
	background-size: 68.5% 100%;
	background-position: center;
	position: relative;
	min-height: 881px;
    background-position: 50% 50%;
    width: 1200px;
}

#background2 .background2{
	background-repeat: no-repeat;
	background-size: 68.5% 100%;
	background-position: center;
	position: relative;
	min-height: 881px;
    background-position: 50% 50%;
    width: 1200px;
}

#background22 .background22{
	background-repeat: no-repeat;
	background-size: 68.5% 100%;
	background-position: center;
	/*height: 55vh;*/
	position: relative;
	min-height: 900px;
    background-position: 50% 50%;
    width: 1200px;
    /*height: 877px;*/
}

#background3 .background3{
	background-repeat: no-repeat;
	background-size: 68.5% 100%;
	background-position: center;
	position: relative;
	min-height: 881px;
    background-position: 50% 50%;
    width: 1200px;
}

#background4 .background4{
	background-repeat: no-repeat;
	background-size: 68.5% 100%;
	background-position: center;
	position: relative;
	min-height: 881px;
    background-position: 50% 50%;
    width: 1200px;
}

#background5 .background5{
	background-repeat: no-repeat;
	background-size: 68.5% 100%;
	background-position: center;
	position: relative;
	min-height: 881px;
    background-position: 50% 50%;
    width: 1200px;
}



/* CONTENTS IN EACH BACKGROUND */

#background1 .content1_ {
    position: absolute;
    color: #3a1a08;
    font-family: 'Lobster 1.3', sans-serif;
    font-style: normal;
    font-weight: 500;
    padding: 0px;
    z-index: 1;
    letter-spacing: -2px;
	white-space: nowrap;
}

#background1 .content2 {
    position: absolute;
    color: #3a1a08;
    font-family: 'Lobster 1.3', sans-serif;
    font-style: normal;
    font-weight: 500;
    z-index: 1;
    letter-spacing: -2px;
	white-space: nowrap;
}

#background1 .content3{
position: absolute;
    font-size: 54px;
    color: #FFFFFF;
    font-family: 'Lobster 1.3', sans-serif;
    font-style: normal;
    font-weight: 500;
    padding: 1px;
    text-align: center;
    z-index: 1;
    line-height: 1;
	white-space: nowrap;
}

/* BACKGROUND2 */

#background2 .content1 {
    position: absolute;
    width: 100%;
    font-size: 57.3px;
    color: #ffff00;
    text-align: center;
    font-weight: regular; 
    font-family: 'Lobster 1.3', sans-serif;    
    z-index: 1;
    font-style: normal;
	white-space: nowrap;
}


#background2 .top1 {
    position: absolute;
    width: 100%;
    color: #FFFFFF;
    text-align: center;
    font-family: 'Montserrat', sans-serif; 
    font-weight: 900; 
    z-index: 1;
	white-space: nowrap;
}


#background2 .first {
    position: absolute;
    width: 100%;
    color: #FFFFFF;
    font-weight: bold;
    font-style: italic;
    text-align: left;
    list-style-type: circle;
    font-family: 'Montserrat', sans-serif;
    z-index: 1;
	white-space: nowrap;
}


#background2 .top2 {
	position: absolute;
    width: 100%;
    color: #FFFFFF;
	font-weight: 900;
	text-align: center;
    font-family: 'Montserrat', sans-serif; 
    z-index: 1;
	white-space: nowrap;	/* Add this line to bring the element in front of the background image */

}

#background2 .second {
    position: absolute;
    width: 100%;
    color: #FFFFFF;
    font-weight: bold;
    font-style: italic;
    text-align: left;
    list-style-type: circle;
    font-family: 'Montserrat', sans-serif;
    z-index: 1;
	white-space: nowrap;
}

#background2 .top3 {
	position: absolute;
    width: 100%;
    color: #FFFFFF;
	font-weight: 900;
	text-align: center;
    font-family: 'Montserrat', sans-serif; 
    z-index: 1; 
	white-space: nowrap;
}

#background2 .third {
    position: absolute;
    width: 100%;
    color: #FFFFFF;
    font-weight: bold;
    font-style: italic;
    text-align: left;
    list-style-type: circle;
    font-family: 'Montserrat', sans-serif;
    z-index: 1;
	white-space: nowrap;
}

#background2 .top4 {
	position: absolute;
    width: 100%;
    color: #FFFFFF;
	font-weight: 900;
	text-align: center;
    font-family: 'Montserrat', sans-serif; 
    z-index: 1;
	white-space: nowrap;	
}

#background2 .fourth {
    position: absolute;
    width: 100%;
    color: #FFFFFF;
    font-weight: bold;
    font-style: italic;
    text-align: left;
    list-style-type: circle;
    font-family: 'Montserrat', sans-serif;
    z-index: 1;
	white-space: nowrap;
}

#background2 .top5 {
	position: absolute;
    width: 100%;
    color: #FFFFFF;
	text-align: center;
    font-family: 'Montserrat', sans-serif; 
    font-weight: 900;   
    z-index: 1; 
	white-space: nowrap;
}

#background2 .fifth {
    position: absolute;
  
    width: 100%;
    color: #FFFFFF;
    font-weight: bold;
    font-style: italic;
    text-align: left;
    list-style-type: circle;
    font-family: 'Montserrat', sans-serif;
    z-index: 1;
	white-space: nowrap;
}


#background22 .bodyy {
    position: absolute;
    color: #FFFFFF;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    padding: 1px;
    text-align: center;
    white-space: nowrap;
    line-height: 1;
    font-size: 26px;
    top: 129rem;
    transform: translateX(22%);
    line-height: 1.2; /* Adjust the value as needed */
    z-index: 1;
    white-space: nowrap;
}

#background22 .bodyy .highlight1 {
    color: #FFFF00;
    font-style: italic;
    font-weight: 800;
}

#background22 .bodyy .highlight2 {
  position: relative;
  top: -68px;
}

#background22 .bodyy .highlight3 {
    position: relative;
    top: -45px;
    color: #FFFF00;
    font-weight: 800;
    font-size: 47px;
}

/* RESOLUTION */

@media (max-width: 740px) {
    /* Adjust font sizes for mobile devices */
    body {
        font-size: 14px;
    }

    /* Adjust font sizes for Background1 */
    #background1 .content1_ {
    font-size: 85px;
    top: 1.2em;
    transform: translate(32.8%, 0);
    }
    
    #background1 .content2 {
	font-size: 85px;
    top: 2.2em;
    transform: translate(65%, 0);
    }

	#background1 .content3 {
	top: 6.7em;
    left: 13.5em;
    transform: translate(3%, 0) rotate(-4deg);
    }

	 #background2 .content1 {
    font-size: 57px;
    top: 59.7rem;
    transform: translateX(32.5%);
	 }

    #background2 .top1 {
    top: 66.2rem;
    transform: translateX(81%);
    font-size: 38px;
	}

    #background2 .top2 {
    left: 133%;
    transform: translate(-50%, 0);
    top: 31.5em;
    font-size: 38px;
	}

    #background2 .top3 {
    left: 90%;
    transform: translate(-44%, 0);
    top: 37.4em;
    font-size: 36px;
    }

    #background2 .top4 {
    left: 97%;
    transform: translate(-50%, 0);
    top: 46.5em;
    font-size: 32px;

    }

    #background2 .top5 {
    left: 102%;
    transform: translate(-50%, 0);
    top: 49.5em;
    font-size: 33px;
	}

    #background2 .first {
    transform: translate(49.8%, 0);
    top: 49.5em;
    font-size: 22.5px;
	}

    #background2 .second {
    transform: translate(68%, 0);
    top: 55.7em;
    font-size: 22.5px;
    }

    #background2 .third {
    transform: translate(46.4%, 0);
    top: 62.2em;
    font-size: 22.5px;
	}

    #background2 .fourth {
    transform: translate(47.4%, 0);
    top: 78.9em;
    font-size: 19.5px;
    }

    #background2 .fifth {
    transform: translate(97.5%, 0);
    top: 74.8em;
    font-size: 22.5px;
	}

    /* ... Adjust font sizes for other content elements ... */
}

@media (min-width: 741px) and (max-width: 991px) {
    /* Adjust font sizes for tablets */
    body {
        font-size: 14px;
    }

    /* Adjust font sizes for Background1 */
    #background1 .content1_ {
    font-size: 85px;
    top: 1em;
    transform: translate(32.8%, 0);
    }
    
    #background1 .content2 {
	font-size: 85px;
    top: 2.2em;
    transform: translate(65%, 0);
    }

	#background1 .content3 {
	top: 6.7em;
    left: 13.5em;
    transform: translate(3%, 0) rotate(-4deg);
    }

	 #background2 .content1 {
    font-size: 57px;
    top: 59.7rem;
    transform: translateX(15.5%);
	 }

    #background2 .top1 {
    top: 66.2rem;
    transform: translateX(23%);
    font-size: 38px;
	}

    #background2 .top2 {
    left: 74%;
    transform: translate(-50%, 0);
    top: 31.5em;
    font-size: 38px;
	}

    #background2 .top3 {
    left: 67%;
    transform: translate(-44%, 0);
    top: 37.4em;
    font-size: 36px;
    }

    #background2 .top4 {
    left: 75%;
    transform: translate(-50%, 0);
    top: 46.5em;
    font-size: 32px;

    }

    #background2 .top5 {
    left: 75%;
    transform: translate(-50%, 0);
    top: 49.5em;
    font-size: 33px;
	}

    #background2 .first {
    transform: translate(23.8%, 0);
    top: 49.5em;
    font-size: 22.5px;
	}

    #background2 .second {
    transform: translate(32%, 0);
    top: 55.7em;
    font-size: 22.5px;
    }

    #background2 .third {
    transform: translate(46.4%, 0);
    top: 62.2em;
    font-size: 25.4%;
	}

    #background2 .fourth {
    transform: translate(25.4%, 0);
    top: 78.9em;
    font-size: 19.5px;
    }

    #background2 .fifth {
    transform: translate(46.5%, 0);
    top: 74.8em;
    font-size: 22.5px;
	}

    /* ... Adjust font sizes for other content elements ... */
}

@media (min-width: 992px) and (max-width: 1199px) {
    body {
        font-size: 18px;
    }

    /* Adjust font sizes for Background1 */
     #background1 .content1_ {
    font-size: 85px;
    top: 1.1em;
    transform: translate(32.8%, 0);
    }
    
    #background1 .content2 {
	font-size: 85px;
    top: 2.2em;
    transform: translate(65%, 0);
    }

	#background1 .content3 {
	top: 6.7em;
    left: 13.5em;
    transform: translate(3%, 0) rotate(-4deg);
    }

	 #background2 .content1 {
    font-size: 57px;
    top: 59.7rem;
    transform: translateX(8.5%);
	 }

    #background2 .top1 {
    top: 66.2rem;
    transform: translateX(8%);
    font-size: 38px;
	}

    #background2 .top2 {
    left: 58%;
    transform: translate(-50%, 0);
    top: 31.5em;
    font-size: 38px;
	}

    #background2 .top3 {
    left: 54%;
    transform: translate(-44%, 0);
    top: 37.4em;
    font-size: 36px;
    }

    #background2 .top4 {
    left: 59%;
    transform: translate(-50%, 0);
    top: 46.5em;
    font-size: 32px;

    }

    #background2 .top5 {
    left: 60%;
    transform: translate(-50%, 0);
    top: 49.5em;
    font-size: 33px;
	}

    #background2 .first {
    transform: translate(18.8%, 0);
    top: 49.5em;
    font-size: 22.5px;
	}

    #background2 .second {
    transform: translate(24%, 0);
    top: 55.7em;
    font-size: 22.5px;
    }

    #background2 .third {
    transform: translate(20.4%, 0);
    top: 62.2em;
    font-size: 22.5px;
	}

    #background2 .fourth {
    transform: translate(19.4%, 0);
    top: 78.9em;
    font-size: 19.5px;
    }

    #background2 .fifth {
    transform: translate(34.5%, 0);
    top: 74.8em;
    font-size: 22.5px;
	}

    /* ... Adjust font sizes for other content elements ... */
}

/* Large laptops and desktops */
@media (min-width: 1200px) {
    body {
        font-size: 20px;
    }

    /* Adjust font sizes for Background1 */
       #background1 .content1_ {
    font-size: 85px;
    top: 0.9em;
    transform: translate(54.5%, 0);
    }
    
    #background1 .content2 {
	font-size: 85px;
    top:1.9em;
    transform: translate(95%, 0);
    }

	#background1 .content3 {
	top: 6.7em;
    left: 13.5em;
    transform: translate(54%, 0) rotate(-4deg);
    }

	 #background2 .content1 {
    font-size: 57px;
    top: 59.7rem;
    transform: translateX(1%);
	 }

    #background2 .top1 {
    top: 66.2rem;
    transform: translateX(-2%);
    font-size: 38px;
	}

    #background2 .top2 {
    left: 58%;
    transform: translate(-60%, 0);
    top: 31.5em;
    font-size: 38px;
	}

    #background2 .top3 {
    left: 54%;
    transform: translate(-54%, 0);
    top: 37.4em;
    font-size: 36px;
    }

    #background2 .top4 {
    left: 59%;
    transform: translate(-59%, 0);
    top: 46.5em;
    font-size: 32px;

    }

    #background2 .top5 {
    left: 60%;
    transform: translate(-60%, 0);
    top: 49.5em;
    font-size: 33px;
	}

    #background2 .first {
    transform: translate(21.8%, 0);
    top: 49.5em;
    font-size: 22.5px;
	}

    #background2 .second {
    transform: translate(24%, 0);
    top: 55.7em;
    font-size: 22.5px;
    }

    #background2 .third {
    transform: translate(23.4%, 0);
    top: 62.2em;
    font-size: 22.5px;
	}

    #background2 .fourth {
    transform: translate(21.4%, 0);
    top: 78.9em;
    font-size: 19.5px;
    }

    #background2 .fifth {
    transform: translate(34.5%, 0);
    top: 74.8em;
    font-size: 22.5px;
	}
}
    /* ... Adjust font sizes for other content elements ... */