/*!
 * Created by Mesandu Perera & Yenul Dulneth
 * Copyright 2024 St. Joseph's College Negombo
 */
@import url('https://fonts.googleapis.com/css2?family=Baskervville+SC&family=Sedan+SC&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Baskervville+SC&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playwrite+CU:wght@100..400&family=Playwrite+PE:wght@100..400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playwrite+CU:wght@100..400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Roboto+Slab:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playwrite+HU:wght@100..400&family=Roboto+Slab:wght@100..900&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Arsenal+SC:ital,wght@0,400;0,700;1,400;1,700&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Raleway:ital,wght@0,100..900;1,100..900&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');
video {
    position: fixed;
    top: 0;
    left: 0;
    object-fit: cover;
    width: 100%;
    overflow: hidden;
    max-height: 100%;
    pointer-events: none;
}
.navbar-collapse .active
{
  -webkit-text-fill-color: #F96D00;
}

body{
    position: relative;
    z-index:  1;
}
.btnget {
    border: 2px solid #04AA6D;
    color: white;
    padding: 16px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    background: transparent;
    transition-duration: 0.4s;
    cursor: pointer;
  }

  .btnget:hover
  {
    color: black;
    background: #04AA6D;
    border: black 2px solid;
  }
  .ftco-cover
  {
    text-align: center;
    justify-content:center ;
    align-items: center;
    position:relative;
    overflow: hidden;
  }
  .ftco-heading
  {
    font-family: "Roboto Mono", monospace;
    font-optical-sizing: auto;
    font-weight: 500;
  }
#about
{
  font-family: "Roboto Mono", monospace;
  font-optical-sizing: auto;
  font-weight: 500;
}
  .ftco-subheading
  {
    font-family: "Raleway", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  }

  .nav-link
  {
    color: black;
  }
  .nav-link
  {
    text-transform: uppercase;
  }

  .logo
  {
    height: 53px;
    width: 48px;
    float: left;
    left: 5px;

  }
.readbtn
{
  color: #fff;
}
.fb-page:hover
{
  cursor: pointer;
}
.intro
{
  background: #031428;
  padding: 50px 20px;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.introheading
{
  background: transparent;
  font-family: "Sedan SC", serif;
  position: relative;
  font-weight: 5000;
  animation: moving 5s ;
  color:#fff ;
  margin-bottom: 35px;
  align-self: center;
  text-align: center;
}

/* @keyframes moving {
  from {
    left:0px;
  }
  to {
    left: 40px;
  }
} */

.introp
{
  color: #ffb000;
  font-family: "Baskervville SC", serif;
  font-weight: 500;
  unicode-bidi: isolate;
  font-size: 20px;
  justify-self: center;
  letter-spacing: 1px;
  text-align: space-between;
  margin-bottom: 35px;
}

.introhyp
{
  color: beige;
  margin-bottom: 0;
  text-decoration: none;
  font-family: 'Courier New', Courier, monospace;
  font-size: 25px;
}
.bg-light
{
  background: wheat;
}
.introhyp:hover
{
  color: brown;
  cursor: pointer;
}
.footer
{
  align-items: center;
  justify-content: center;
  background: #00040F;
  align-content: center;
  padding: 80px 80px;
}
.footlogo
{
  width: 100px;
  height: 120px;
  align-content: center;
  align-items: center;
  align-self: center;
  cursor: pointer;
  left: 50%;
  right: 50%;
}
.footimg
{
  align-items:center ;
  text-align: center;
}
.footicon , .footicon1
{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 30px;
  text-align: center;
}
.footicon h2 , .footicon1 h2 {
  text-align: center;
  margin-right: 25px;
}
.icon
{
  color: blue;
  margin-left: 25px;
  margin-right: 25px;
  font-size: 100px;
}
.copyright .copyp
{
  font-size: 16px;
  color: #fff;
  font-weight:500 ;
  font-family:'Courier New', Courier, monospace ;
}
/* .cursor
{
  cursor: pointer;
} */
.copyright
{
  text-align: center;
}
.by .bystudents
{
  font-family:Georgia, 'Times New Roman', Times, serif ;
  font-size: 12px;
  color: #fff;
  font-weight:500 ;
}
.by
{
  text-align: center;
}
.brline .br
{
  color: #fff;
  cursor: pointer;
  background: #fff;
}
.brline
{
  cursor: pointer;
}
.icona
{
  /* background: lightblue; */
  padding: 1px;
  /* display: block; */
  margin: 10px;
  cursor: pointer;
  border-radius: 50%;
}
.aicon a
{
  align-items: center;
  justify-content: center;
  text-align: center;
}
.icona:hover
{
  /* background: green; */
  /* padding: 0.1px; */
  /* display: block; */
  margin: 10px;
  border-radius: 50%;
}
.icon
{
  max-height: 100%;
  max-width: 100%;
}
.vissionmission
{
 background:#00040f;
 padding: 100px 100px 200px ;
 display: inherit;
}
.vissionmission1
{
 background:#00040f;
 padding: 100px 100px 125px ;
 background-size: cover;
 overflow-x: hidden;
 overflow-y: hidden;
 display: inherit;
}
/* .mission
{
  background: #00040f;
  padding:500px;
  display: inline-table;
  text-align: left;
} */
 .visiontopic , .missiontopic
 {
  /* margin-left: 25px; */
  font-family: Georgia, 'Times New Roman', Times, serif;
  color: #fff;
  /* float: left; */
  font-weight: 900;
 }
.vision
{
  margin-left: 30px;
  color: #fff;
  font-size: 20px;
  font-family: "Playwrite PE", cursive;
  font-weight: 900;
  /* align-self: left; */
  /* float: left; */
}
.mission
{
  margin-left: 25px;
  color: #fff;
  font-size: 20px;
  font-family: "Playwrite PE", cursive;
  font-weight: 900;
}


/* Scroll Bar */
/* Scrollbar Styles */
::-webkit-scrollbar {
  width: 0.6vw;
  background: #00040F;
}


::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 10px;
}



  ::-webkit-scrollbar-thumb{
    background: -webkit-linear-gradient(transparent,#ffffff);
    background: linear-gradient(transparent,#ffffffff);
    border-radius: 20px;
    height: 10px;
}




::-webkit-scrollbar-thumb:hover {
  cursor: pointer;
  opacity: 1;
}


/* RECTORS MESSAGE */


.recmsg
{
  padding: 10px;
  align-items: center;
  background: #00040F;
  color: #fff;

}
.rechead
{
  color: #fff;
  /* margin-top:; */
  font-family: "Playfair Display", serif;
  margin-left: 25px;
}
.recmsgdiv
{
  box-sizing: border-box;
  margin: 20px;
  border-radius: 36px 36px 36px 36px;
  padding: 50px;
  background: #6b6d74;
}
.centeralignp
{
  text-align: center;
  align-content: center;
  font-family: "Roboto Slab", serif;
  margin-top: 35px;
  margin-left: 25px;
  align-items: center;
  text-align: justify;
}
#about
{
  font-family: 'Courier New', Courier, monospace;
  font-weight: bolder;
}
.endingrecmsg
{
  align-items: left;
  margin-left: 25px;
  font-family: "Roboto Slab", serif;
  margin-bottom: 50px;
}
.recpic
{
  float: right;
  margin-top: 50px;
  vertical-align: bottom;
  border-radius: 198px 198px 198px 198px;
  height: 200px;
  width: 200px;
}
/* .homenavhover:hover
{
  text-decoration: underline;
  text-decoration-color:blue ;
  text-decoration-thickness: 2px;
  text-underline-position: under;
  transition: underline 0.5s ease-in;
} */
.navcontainer
{
  background-color: #FFFFFF6B;
  width: 100%;
  border-radius: 30px 30px 30px 30px;
  /* padding-right: 500px; */
  /* padding-left: 20px; */
}
.logo
{
  padding-left: 0px;
}
.ftco-navbar-light
{
  align-items: center;
  text-align: center;
}

a.nav-link.nav-link1:hover
{
  /* text-decoration: underline ; */
  /* transition: 0.3s ;
  text-decoration: underline solid ; */
  text-decoration-color: black solid;
  text-decoration-thickness:3px ;
  -webkit-text-fill-color: black;
  text-underline-offset: 10px;
  text-decoration-line:40px;

}
.nav-link
{
  font-family: "Libre Baskerville", serif;
}
.undermaintenance
{
  background: rgba(206, 203, 13, 0.404);
  color: #000;
  padding: 80px;
  text-align: center;
}
.maintenanceh2
{
   color: #000;
   font-family:'Courier New', Courier, monospace;
   font-weight: bolder;
   font-size: 50px;
}
/* Preloader styles */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row nowrap;
      -ms-flex-flow: row nowrap;
          flex-flow: row nowrap;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  background: none repeat scroll 0 0 #ffffff;
}

.spinner {
  width: 30px;
	height: 30px;
	background-color: #0066FF;
	-webkit-animation: spin 3s infinite ease-in-out;
	animation: spin 3s infinite ease-in-out;
  animation-duration: 1s;
  -webkit-animation-duration: 1s;
}

@keyframes spin  {
  0% {
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
            transform: perspective(120px) rotateX(0deg) rotateY(0deg); }

  50% {
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
            transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); }

  100% {
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
            transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } }

@keyframes spin {
  0% {
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
            transform: perspective(120px) rotateX(0deg) rotateY(0deg); }

  50% {
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
            transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); }

  100% {
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
            transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } }

/* Main content styles */


/* .per
{
  height: 250px;
  width: 250px;
  top: 0;
  left: 0;
  position: absolute;
  background: rgba(0,0,0,0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  opacity: 0;
  transition: 0.6s;
}
/* figure:hover
{
  filter: blur(5px);
} */
 /*
.per:hover .figcapimggallery
{
  filter: blur(0);
  z-index: 10;
}
.per:hover{
  opacity: 1;
  backdrop-filter: blur(5px);
  border-radius: 1rem;
  cursor: pointer;
}
.figcapimggallery
{
  color: #fff;
  font-family: Georgia, 'Times New Roman', Times, serif;
  letter-spacing: 1px;
  z-index: 10;
  filter: blur(0);
} */
.download
{
  background: transparent;
  color: #FFFFFF6B;
  font-family: 'Times New Roman', Times, serif;
  -webkit-text-fill-color: #FFFFFF9B;
  border: none;
  outline: none;
}
.download:hover{
   color: brown;
   border: none;
   outline: none;
   cursor: pointer;
   -webkit-text-fill-color: brown;
}
.ml-auto .drop .uldrop
{
  display: none;
  margin: 0;
  position: absolute;
}
.ml-auto .drop:hover .uldrop
{
  display: block;
  color: #fff;
  position: absolute;
  margin: 0;
}
.ml-auto .drop .uldrop li
{
  margin-left: 0;
  margin: 0;
  text-align: left;
  color:#ffff ;
  list-style: none;
  font-family: Georgia, 'Times New Roman', Times, serif;
  display: block;
  -webkit-text-fill-color: #fff;
  background:rgba(0,0,0,0.6);
  padding: 10px;
}
/* #00040f */
.ml-auto .drop .uldrop li:hover
{
  -webkit-text-fill-color: #00040f;
  background: #fff;
  transition: 0.6s;
}
@media (max-width:952px){
  .ml-auto .drop:hover .uldrop li:hover{
    display: block;
    position: static;
  }
}
@media (max-width:850px){
  .ml-auto .drop:hover .uldrop li:hover{
    display: block;
    position: static;
  }
}
.fbcon .icona svg:hover path{
  fill:  #0165E1;
}

.xcon .icona svg:hover path{
  fill: #1D9BF0;
}

/* .igcon .icona svg:hover path{
  fill: (#f9ce34, #ee2a7b,  #6228d7);
} */
 .igcon .icona svg:hover path
 {
  fill: #C13584;
 }
 .ytcon .icona svg:hover path
 {
  fill: red;
 }
 #blurry-filter {
  width: 100%;
  height: 9rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='4' numOctaves='1'/%3E%3C/filter%3E%3Crect width='100' height='100' style='filter:url(%23f)' opacity='.2'/%3E%3C/svg%3E");
  mask: linear-gradient(black 7rem, transparent);
  -webkit-mask: linear-gradient(black 7rem, transparent);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1;
  pointer-events: none;
  touch-action: none;
}

body {
  margin: 0;
  padding: 0;
  background-color: #EEE;
  font-family: "Open Sans", sans-serif;
  box-sizing: border-box;
  cursor: default;
}

*, *:before, *:after {
  box-sizing: inherit;
}

header {
  width: 100%;
  height: 8rem;
  position: sticky;
  top: 0;
  z-index: 1;
}
header > div {
  width: calc(100% - 3rem);
  max-width: 800px;
  height: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
}

#title {
  width: 100%;
}
#title .parent {
  line-height: 1em;
  color: #666;
}
#title .name {
  font-size: 2em;
  font-weight: bold;
  color: #333;
  mix-blend-mode: difference;
}

#reference {
  display: flex;
}
#reference > a {
  color: #444;
}
#reference > a + a {
  margin-left: 1rem;
}

main, #folders {
  width: calc(100% - 3rem);
  max-width: 800px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 1.5rem;
}

main > article {
  width: 100%;
  height: 32px;
  padding: 1rem;
  background-color: #FFF;
}
main > figure {
  width: 250px;
  margin: 0;
  background-color: #FFF;
  background-size: cover;
  border-radius: 1rem;
  height: 250px;
  transition: all 100ms ease-out;
}
main > figure:hover {
  box-shadow: 0 16px 16px -4px rgba(0, 0, 0, 0.3);
  transform: scale(1.5);
  /* background-color: #333; */
  cursor: pointer;
}
main > figure:after {
  content: "";
  padding-bottom: 100%;
  display: block;
}
main > figure > figcaption {
  margin: 1rem;
  color: #FFF;
  font-size: 1.25em;
  position: absolute;
}

#folders {
  margin-top: 0.5rem;
  margin-bottom: 2rem;
}
#folders > article {
  width: 100%;
  height: 4rem;
  padding: 0 1.5rem;
  background-color: #FFF;
  border-radius: 1rem;
  line-height: 4rem;
  transition: all 100ms ease-out;
}
#folders > article:hover {
  box-shadow: 0 16px 16px -4px rgba(0, 0, 0, 0.1);
  transform: scale(1.02);
}

footer {
  width: 100%;
  height: 8rem;
}
@media (max-width:852px)
{
  main figure:hover{
    transform: scale(1);
  }
  /* .per:hover
  {
    transform: scale(0);
  } */
}

.freespaceclubsandsocietiesdivsjcnegombo{
  background: #031428;
  justify-content: space-around;
  padding:50px;
  text-align: justify;
  text-justify: inter-word;
}
.freespacep
{
  background: #031428;
  color: #fff;
  font-family: 'Times New Roman', Times, serif;
}
.clubs li{
  margin-left: 40px;
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
.topmargin
{
  margin-top: 20px;
}
.exploremore {
  align-items: center;
  text-align: center;
  justify-content: center;
}
.exploremore h4 a{
  /* margin-top: 200px; */
  font-family: 'Courier New', Courier, monospace;
  text-decoration: underline;
  cursor: pointer;
  text-decoration-color:red ;
  color: black;
}
.exploremore h4{
  margin-top: 40px;
  padding-bottom: 0;
}
.exploremore h4 a:hover{
  color: orangered;
  cursor: pointer;
  text-decoration-color:black ;
}
.ftco-navbar-light.scrolled .nav-link.active {
  -webkit-text-fill-color: #F96D00;
}
/* .ftco-navbar-light.scrolled .container
{
  background: #fff;
}
.navbar .navbar-expand-lg .navbar-dark .ftco_navbar .bg-dark .ftco-navbar-light .scrolled .awake .container
{
  background: #fff;
}
#ftco-navbar .container{
  background: #fff;
} */
 .navcontainer{
  backdrop-filter: blur(9999px);
  /* width: 100%; */
 }