@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:#FFF; 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:145px; 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: 388px; background-size:cover; float:left; background-position:right top; background-repeat:repeat-x; position:relative; z-index:-9999;}

#halfdiv {width: 45%}

bullet::before {content: '•'; margin-right: 10px; color: black; font-size: 1.2em;}
bullet {display: block; margin-left: 20px; text-indent: -20px; padding-left: 20px;}

#switch {

	writing-mode:vertical-rl; transform: translate(0, -50%) rotate(180deg); background-color: #206400; 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; font-size: 14px; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);

} #switch a {color: #fff; font-size: 15px; font-weight: bold; text-decoration: none;} 



#spldiv {width: 100%; padding: 12px 24px 24px 24px; background-color: #FFEFDB; 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:#FFDAAC; 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;

    }

}