/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Feb 06 2026 | 18:18:23 */
/* Add your CSS code here.

For example:
.example {
    color: red;
}

For brushing up on your CSS knowledge, check out http://www.w3schools.com/css/css_syntax.asp

End of comment */ 

#boat {
    position: relative;
    right: -43%;  /* 90% outside, 10% visible */
}
body {
    overflow-x: hidden;   /* prevent horizontal scroll */
}


#airplane {
    position: absolute;
     right: 275px;
    bottom: 8vh;
    transform-origin: center;
}


 #floatContaine1,
#floatContaine2,
#floatContaine3,
#floatContaine4,
#floatContaine5,
#floatContaine6,
#floatContaine7,
#floatContaine8,
#floatContaine3{
  will-change: transform, opacity;
  backface-visibility: hidden;
/* 	margin-left: auto; 
  margin-right: 0; */
}
  
/* #myColumn{
	height: 58vh;
  will-change: transform;
	overflow-y: auto;
} */

/* 
#myColumn::-webkit-scrollbar {
  width: 8px;
}

#myColumn::-webkit-scrollbar-track {
  background: #bdf0ff;  
}

#myColumn::-webkit-scrollbar-thumb {
  background: #7eb2ff;  
  border-radius: 10px;
}

#myColumn::-webkit-scrollbar-thumb:hover {
  background: #7eb2ff;
} */

.float-wrapper {
  position: relative;
}

.float-wrapper > div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

#myColumn{
	height: 58vh;
  will-change: transform;
	overflow: hidden;
} 


@media only screen and (min-width: 2400px) {
  @supports (-webkit-appearance: none) or (-moz-appearance: none) {
	  #boat {
    position: relative;
    right: -85% !important;
}
	
	}
}
@media only screen and (min-width: 1366px)and (max-width: 1366px) {
  @supports (-webkit-appearance: none) or (-moz-appearance: none) {
#myColumn{
	height: 48vh !important;
}
	#airplane {
    right: 132px !important;
    bottom: 15vh !important;
}
	#boat {
		right: -55% !important;
}
	}
}
@media only screen and (min-width: 1200px)and (max-width: 1200px) {
  @supports (-webkit-appearance: none) or (-moz-appearance: none) {
#myColumn{
	height: 45vh !important;
}
	  #boat {
		right: -90% !important;
}
		#airplane {
    right: 165px !important;
}
	}
}
@media only screen and (min-width: 1024px) and (max-width: 1024px) {
  @supports (-webkit-appearance: none) or (-moz-appearance: none) {
	  #myColumn {
    height: 22vh !important;
}
	  #boat {
		right: -110% !important;
}
	  #airplane {
    right: 42px !important;
    bottom: 3vh !important;
}
	}
}
@media only screen and (min-width: 768px) and (max-width: 820px) {
  @supports (-webkit-appearance: none) or (-moz-appearance: none) {
#myColumn {
    height: 26vh !important;
}
	    #boat {
		right: 70% !important;
}
	  #airplane {
    right: -55px !important;
		  bottom: 4vh !important;
	  }
	}
}
@media only screen and (min-width: 100px) and (max-width: 600px) {
  @supports (-webkit-appearance: none) or (-moz-appearance: none) {
	  
	  body {
    overflow-x: hidden !important;   /* prevent horizontal scroll */
}
	#myColumn {
		height: 36vh !important;
}

	  #airplaneMobile {
  position: absolute;
/*     transform-origin: center;
    left: 10px;  
    top: 70vh;      
    right: auto !important;
    bottom: auto !important; */
    will-change: transform;
  }
	  .scroll-section{
		  position: relative !important;
	  }
#boat {
    position: relative !important;
    will-change: transform;
}
	  #boat {
    display: none !important;
}
	}
}


@media only screen and (min-width: 100px) and (max-width: 600px) {
  @supports (-webkit-appearance: none) or (-moz-appearance: none) {
	  #floatContaine1{
		  --align-self: flex-end !important;
	  }    
	}
}

@media only screen and (min-width: 1590px) and (max-width: 1690px) {
  @supports (-webkit-appearance: none) or (-moz-appearance: none) {
	  
	}
}