@charset "utf-8";

/* CSS Document */

::-webkit-scrollbar {display: none;}
#element::-webkit-scrollbar {display: none;}
::-webkit-scrollbar {width: 16px; background: transparent; /* Hides the scrollbar background */}
::-webkit-scrollbar-thumb {background: linear-gradient(145deg, #ccc, #aaa); border-radius: 10px; box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.3), inset -2px -2px 5px rgba(255, 255, 255, 0.5);}
::-webkit-scrollbar-button {display: none; /* Hides the scrollbar arrows */}
* {scrollbar-width: thin; scrollbar-color: #ccc transparent; /* Hides the scrollbar background */}
*::-webkit-scrollbar-thumb {background: linear-gradient(145deg, #ccc, #aaa); border-radius: 10px; box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.3), inset -2px -2px 5px rgba(255, 255, 255, 0.5);}

body, html {height: 100%;}
* {box-sizing: border-box;}

body {font-size: 100%; font-family: Arial; font-size: 15.8px; color:#2e2e2e; text-decoration:none; line-height: 22px; background-color:#FFF5E3; margin:0px; padding:0px; width:100%; height:100%; -webkit-font-smoothing: antialiased;}

#header {padding-right:10%; padding-left:10%;}
#helloheader {width:100%; float:left; background-color:#8e371f; color:#fff; padding-left:10%; padding-right:10%;}
#workarea, #workarea_small {width:100%; display:block; float:left; padding-right:10%; padding-left:10%; padding-top:6px; padding-bottom:32px;}
#workarea p {text-align: justify;}

#logo {width:28%; height:auto; margin-right:auto; margin-left:auto; padding-bottom: 36px; padding-top: 32px;} 

#right {float:right;} #left {float:left;}
		
#landscapedisplay {display: block;} #portraitdisplay {display: none;}
.mobile {display: none;} .tab {display: none;} .desktop {display: block;}
#mobile {display: none;} #tab {display: none;} #desktop {display: block;}

#pagename {margin-top:95px; width:20%; text-align:right; border-bottom-right-radius: 8px; border-top-right-radius: 8px;}

.topnow {writing-mode:vertical-rl; transform:rotate(180deg); right: 35px; bottom: 35px; position: fixed; color: #b561f5; font-size: 60px; cursor: pointer; display: none;}

#profileimage {width: 14%; height: auto; margin-left: 22px; margin-top: 16px; margin-bottom: 16px; float: right; border-radius: 50%; border: 1px solid #8e371f;}

.inner {display: inline-block; vertical-align: middle; margin-right:15px;}

#coverimage {width: 100%; left:0px; height: 320px; background-size:cover; float:left; background-attachment: fixed; background-position:right top; background-repeat:repeat-x; position:relative; z-index:-9999;}

#halfdiv {width: 45%}

#switch {
	writing-mode:vertical-rl; transform: translate(0, -50%) rotate(180deg); background-color: #2a3192; padding: 15px; padding-left: 8px; padding-right: 12px; border-top-right-radius: 8px; border-bottom-right-radius: 8px; right: 0px; top: 50%; position: fixed; color: #fff; border: 1px solid #fff; border-left: none; z-index: 999; 
} #switch a {color: #fff; font-size: 15px; font-weight: bold; text-decoration: none;} 

#spldiv {width: 100%; padding: 12px 24px 24px 24px; background-color: #FFF9ED; border-radius: 25px; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3); margin-top: 32px;}

/* Fonts */

h1 {font-size: 24px; font-weight: 400; color:#2e2e2e; padding:25px; background-color:#fff; opacity: 0.9;}
h2 {font-size: 22px; font-weight: bold; color:#2e2e2e; margin-top:15px; margin-bottom:15px; line-height: 34px;}
h3 {font-size: 18px; color:#595959; margin-top:9px; margin-bottom:9px; font-weight: bold; line-height: 24px;}
h4 {font-size: 16px; color:#2e2e2e; margin-top:9px; margin-bottom:9px; font-weight: 250;}
h5 {font-size: 14px; color:#595959; margin-top:12px; margin-bottom:12px; font-weight: 250;}
h6 {font-size: 12px; color:#2e2e2e; margin-top:2px; margin-bottom:2px; line-height:16px;}

a {outline: 0;}
a img {text-decoration: none;}
a:link {text-decoration: none; color: #2e2e2e;}
a:visited {text-decoration: none; color: #2e2e2e;}
a:active {text-decoration: none; color: #2e2e2e;}
a:hover, a:visited {text-decoration: none; color: #2e2e2e;}

.white a:link {text-decoration: none; color: #fff;}
.white a:hover{text-decoration: none; color: #fff;}
.white a:visited {text-decoration: none; color: #fff;}
.white a:active {text-decoration: none; color: #fff;}

/* New CSS */

#footerone {display: flex; justify-content: space-between; align-items: center; width:100%; padding: 12px 9vw; background-color:#f5930c; text-align:left; font-size: 13px; font-weight: bold; color: #2e2e2e;}
#footertwo {display: flex; justify-content: space-between; align-items: center; width:100%; padding: 12px 9vw; background-color:#2e2e2e; text-align:left; font-size: 13px; font-weight: bold; color: #fff;}

/* mobile landscape */
@media all and (min-width: 414px) and (max-width: 783px) and (orientation: landscape) {
	#logo {width:36%;} #header, #helloheader {padding-right:5%; padding-left:5%;}
	#pagename {opacity:0.7; text-align:center; width:100%;}
	.topnow {right: 25px; bottom: 25px; font-size: 42px;}
	#workarea {padding-right:5%; padding-left:5%;}
	#workarea_small {padding-right:2%; padding-left:2%;}
	#footerone, #footertwo {padding: 12px 3vw}		
	.mobile {display: block;} .desktop {display: none;} #mobile {display: block;} #desktop {display: none;}
	#profileimage {width: 24%;}
	#halfdiv {width: 100%; border: none;}
}

/* tab landscape */
@media all and (min-width: 784px) and (max-width: 1024px) and (orientation: landscape) {
	#logo {width:28%;} #header, #helloheader {padding-right:5%; padding-left:5%;}
	#pagename {opacity:0.7; text-align:center; width:100%;}
	.topnow {right: 25px; bottom: 25px; font-size: 42px;}
	#workarea {padding-right:5%; padding-left:5%;}
	#workarea_small {padding-right:2%; padding-left:2%;}
	#footerone, #footertwo {padding: 8px 5vw}
	.mobile {display: none;} .desktop {display: block;} #mobile {display: none;} #desktop {display: block;}
	#halfdiv {width: 48%}
}

/* mobile portrait */
@media all and (max-width: 767px) and (orientation: portrait) {
	#logo {width:68%;} #header, #helloheader {padding-right:5%; padding-left:5%;}
	#pagename {opacity:0.7; text-align:center; width:100%;}
	.topnow {right: 25px; bottom: 25px; font-size: 42px;}
	#workarea {padding-right:5%; padding-left:5%; overflow-x: hidden;}
	#workarea_small {padding-right:2%; padding-left:2%;}
	#right {float:right; width:100%; text-align:center;}
	#left {float:left; width:100%; text-align:center;}
	#footerone, #footertwo {padding: 10px 4vw;} 
	#landscapedisplay {display: none;} #portraitdisplay {display: block;}
	.mobile {display: block;} .desktop {display: none;} #mobile {display: block;} #desktop {display: none;}
	#corner-pop {max-width: auto; right: 20%;}
	#profileimage {width: 40%; margin: 12px 0 12px 0; float: none; margin-left: 30%; margin-right: 30%;}
	#halfdiv {width: 100%; border: none;}
}

/* tab portrait */
@media all and (min-width: 768px) and (orientation: portrait) {
	#logo {width:32%;} #header, #helloheader {padding-right:5%; padding-left:5%;}
	#pagename {opacity:0.7; text-align:center; width:100%;}
	.topnow {right: 25px; bottom: 25px; font-size: 42px;}
	#workarea {padding-right:5%; padding-left:5%;}
	#workarea_small {padding-right:2%; padding-left:2%;}
	#footerone, #footertwo {padding: 10px 2.5vw;}
	.mobile {display: block;} .desktop {display: none;} #mobile {display: block;} #desktop {display: none;}
	#profileimage {width: 30%;}
	#halfdiv {width: 47%}
}

/* Photo Gallaery */

   .image-container {
      display: flex;
      flex-wrap: nowrap;
      overflow-x: auto;
      gap: 10px;
      padding: 5px 0; 
	  align-items: center;
    }

    .image-container img {
      width: 100%;
      height: auto;
	  background-color: #fff;
      border-radius: 15px;	
    }

    @media (min-width: 1200px) { /* Desktop */
      .image-container {
        flex-wrap: wrap;
		justify-content: center;   
      }
      .image-container img {
        width: 15%; /* 6 images in one row */
		background-color: #FFF5E3;  
      }
    }

    @media (min-width: 768px) and (max-width: 1199px) and (orientation: landscape) { /* Tablet landscape */
      .image-container img {
        width: 16%; /* All 6 images in one line */
      }
    }

    @media (max-width: 767px) and (orientation: landscape) { /* Mobile landscape */
      .image-container img {
        width: 40%; /* 3 images in one row */
      }
    }

    @media (max-width: 767px) and (orientation: portrait) { /* Mobile portrait */
      .image-container img {
        width: 35%; /* 2.5 image per row */
      }
    }

/* Menu */

    nav {}

    nav ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      display: flex; /* Horizontal alignment for desktop */
      justify-content: center; /* Center menu horizontally */
    }

    nav li {
      position: relative;
    }

    nav a {
      display: block;
      padding: 6px 20px;
      text-decoration: none;
      color: #2e2e2e;
      font-size: 18px;
      border-right: 2px solid #FFDAAC; /* Right-side border */
      transition: background-color 0.3s ease;
	  font-weight: bold;	
    }

    nav a:hover {
      color: #8e371f;
    }

    /* Remove the border from the last menu item */
    nav li:last-child a {
      border-right: none;
    }

    /* Submenu styles */
    .submenu {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      background-color: #f4f4f4;
      min-width: 200px;
      border-radius: 4px;
	  text-align: left;
	  border: 1px solid #ccc;
	  padding: 5px 0px;	
    }

    .submenu li a {
      padding: 12px 15px;
	  border-right: none;
    }

    .submenu li a:hover {
    	font-weight: bold;
    }

    /* Show submenu on hover */
    li:hover > .submenu {
      display: block;
    }

/* Mob Menu */

.topnav {overflow: hidden; background:none;}
.topnav a {float: left; display: block; color: #2e2e2e; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 16px; font-weight: bold;}
.topnav a:hover {background-color: #fff; color: black;}
.topnav .icon {display: none;}

  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {float: right; display: block;}

  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {position: absolute; right: 0; top: 0;}
  .topnav.responsive a {float: none; display: block; text-align: left;}


/* FAQs */

		.faqquestion {
		  background-color: #FFDAAC;
		  color: #444;
		  cursor: pointer;
		  padding: 18px;
		  width: 100%;
		  border: none;
		  text-align: left;
		  outline: none;
		  font-size: 15px;
		  transition: 0.4s;
		  margin-top: 7px;
		  border-radius: 12px;
		}

		.faqactive, .faqquestion:hover {
		  background-color: #8e371f; color: #fff;
		}

		.faqquestion:after {
		  content: '\002B';
		  color: #000;
		  font-weight: bold;
		  float: right;
		  margin-left: 5px;
		}

		.faqactive:after {
		  content: "\2212";
		  color: #fff;
		}

		.faqanswer {
		  padding: 0 18px;
		  max-height: 0;
		  overflow: hidden;
		  transition: max-height 0.2s ease-out;
		}

.progress {
  background: linear-gradient(to right, #f5930c var(--scroll), transparent 0);
  background-repeat: no-repeat; position: fixed; width: 100%; height: 4px; z-index: 999;
}

/* leaf animations */

#leaves {position:relative;top:-50px;width:100%;text-align: right; position: fixed;}

#leaves i {
    display: inline-block;
    width: 200px;
    height: 150px;
    background: linear-gradient(to bottom right, #309900, #005600);
    transform: skew(20deg);
    border-radius: 5% 40% 70%;
    box-shadow: inset 0px 0px 1px #222;
    border: 1px solid #333;
    z-index: 1;
    -webkit-animation: falling 5s 0s infinite;
}

#leaves i:nth-of-type(2n) { -webkit-animation: falling2 5s 0s infinite; }
#leaves i:nth-of-type(3n) { -webkit-animation: falling3 5s 0s infinite; }

#leaves i:before {
  position: absolute;
  content: '';
  top: 117px;
  right: 9px;
  height: 27px;
  width: 32px;
  transform: rotate(49deg);
  border-radius: 0% 15% 15% 0%;
  border-top: 1px solid #222;
  border-bottom: 1px solid #222;
  border-left: 0px solid #222;
  border-right: 1px solid #222;
  background: linear-gradient(to right, rgba(0,100,0,1), #005600);
  z-index: 1;
}

#leaves i:after {
  content: '';
  height: 125px;
  width: 10px;
  background: linear-gradient(to right, rgba(0,0,0,.15), rgba(0,0,0,0));
  display: block;
  transform: rotate(125deg);
  position: absolute;
  left: 85px;
  border-radius:50%;
}


#leaves i:nth-of-type(n)    { height:23px; width:30px; }
#leaves i:nth-of-type(n):before { width:7px; height:5px; top:17px; right:1px; }
#leaves i:nth-of-type(n):after { width:2px; height:17px; left: 12px; top:0px; }

#leaves i:nth-of-type(2n+1)    { height:11px; width:16px; }
#leaves i:nth-of-type(2n+1):before { width:4px; height:3px; top:7px; right:0px; }
#leaves i:nth-of-type(2n+1):after { width:2px; height:6px; left: 5px; top:1px; }

#leaves i:nth-of-type(3n+2)  { height:17px; width:23px; }
#leaves i:nth-of-type(3n+2):before  { height:4px; width:4px; top:12px; right:1px; }
#leaves i:nth-of-type(3n+2):after  { height:10px; width:2px; top:1px; left:8px; }

#leaves i:nth-of-type(n)   { -webkit-animation-delay: 1.9s;}
#leaves i:nth-of-type(2n)  { -webkit-animation-delay: 3.9s;}
#leaves i:nth-of-type(3n)  { -webkit-animation-delay: 2.3s;}
#leaves i:nth-of-type(4n)  { -webkit-animation-delay: 4.4s;}
#leaves i:nth-of-type(5n)  { -webkit-animation-delay: 5s;  }
#leaves i:nth-of-type(6n)  { -webkit-animation-delay: 3.5s;}
#leaves i:nth-of-type(7n)  { -webkit-animation-delay: 2.8s;}
#leaves i:nth-of-type(8n)  { -webkit-animation-delay: 1.5s;}
#leaves i:nth-of-type(9n)  { -webkit-animation-delay: 3.3s;}
#leaves i:nth-of-type(10n) { -webkit-animation-delay: 2.5s;}
#leaves i:nth-of-type(11n) { -webkit-animation-delay: 1.2s;}
#leaves i:nth-of-type(12n) { -webkit-animation-delay: 4.1s;}
#leaves i:nth-of-type(13n) { -webkit-animation-delay: 1s;  }
#leaves i:nth-of-type(14n) { -webkit-animation-delay: 4.7s;}
#leaves i:nth-of-type(15n) { -webkit-animation-delay: 3s;  }

#leaves i:nth-of-type(n)    { background: linear-gradient(to bottom right, #309900, #005600); }
#leaves i:nth-of-type(2n+2)  { background: linear-gradient(to bottom right, #5e9900, #2b5600); }
#leaves i:nth-of-type(4n+1)  { background: linear-gradient(to bottom right, #990, #564500); }

#leaves i:nth-of-type(n)    { opacity: .7;}
#leaves i:nth-of-type(3n+1)  { opacity: .5;}
#leaves i:nth-of-type(3n+2)  { opacity: .3;}

#leaves i:nth-of-type(n)    {transform: rotate(180deg);}


#leaves i:nth-of-type(n) { -webkit-animation-timing-function:ease-in-out;}

@-webkit-keyframes falling {
    
    0% {
        -webkit-transform:
            translate3d(300,0,0)
            rotate(0deg);
    }
    
    100% {
        -webkit-transform:
            translate3d(-350px,700px,0)
            rotate(90deg);
        opacity: 0;
    }
}

@-webkit-keyframes falling3 {
     0% {
        -webkit-transform:
            translate3d(0,0,0)
            rotate(-20deg);
    }
    
    100% {
        -webkit-transform:
            translate3d(-230px,640px,0)
            rotate(-70deg);
        opacity: 0;
    }
}

@-webkit-keyframes falling2 {
     0% {
        -webkit-transform:
            translate3d(0,0,0)
            rotate(90deg);
    }
    
    100% {
        -webkit-transform:
            translate3d(-400px,680px,0)
            rotate(0deg);
        opacity: 0;
    }
}