@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville&family=Noto+Serif+Tamil&display=swap');







* {

    box-sizing: border-box;

  }

  

  body {

    margin: 0px;

    font-family: 'segoe ui';

  }

  

  .nav {

    height: 50px;

    width: 100%;

    background-color: #ffffffd7;

    position: relative;

    z-index: 2;

    

  }

  

  .nav > .nav-header {

    display: inline;

  }

  

  .nav > .nav-header > .nav-title {

    display: inline-block;

    font-size: 22px;

    color: #fff;

    padding: 10px 10px 10px 10px;

  }

  

  .nav > .nav-btn {

    display: none;

  }

  

  .nav > .nav-links {

    display: inline;

    float: right;

    font-size: 18px;

  }

  

  .nav > .nav-links > a {

    display: inline-block;

    padding: 13px 10px 13px 10px;

    text-decoration: none;

    color: #efefef;

  }

  

  .nav > .nav-links > a:hover {

    background-color: rgba(0, 0, 0, 0);

  }

  

  .nav > #nav-check {

    display: none;

  }

  

  @media (max-width:1000px) {

    .nav > .nav-btn {

      display: inline-block;

      position: absolute;

      left: 0px;

      top: 0px;

    }

    .nav > .nav-btn > label {

      display: inline-block;

      width: 50px;

      height: 50px;

      padding: 13px;

    }

    .nav > .nav-btn > label:hover,.nav  #nav-check:checked ~ .nav-btn > label {

      background-color: rgba(0, 0, 0, 0.3);

    }

    .nav > .nav-btn > label > span {

      display: block;

      width: 25px;

      height: 10px;

      border-top: 2px solid #0c17ed;

    }

    .nav > .nav-links {

      position: absolute;

      display: block;

      width: 100%;

      background-color: #333;

      height: 0px;

      transition: all 0.3s ease-in;

      overflow-y: hidden;

      top: 50px;

      left: 0px;

    }

    .nav > .nav-links > a {

      display: block;

      width: 100%;

    }

    .nav > #nav-check:not(:checked) ~ .nav-links {

      height: 0px;

    }

    .nav > #nav-check:checked ~ .nav-links {

      height: calc(100vh - 50px);

      overflow-y: auto;

    }

    .Event{

        height: max-content;

    }

  }













body{

    background-image: url("./image/background.jpg");



    background-attachment: fixed;

    background-size:cover;

    background-repeat: no-repeat;

}

.sticky{

    position: -webkit-sticky;

    position: sticky;

    top: 0;

}

.logo{

    padding-left: 50px;

    padding-top: 4px;

    height: 50px;

    width: 400px;

}





.glow-on-hover {

    width: 100px;

    height: 30px;

    border: none;

    outline: none;

    font-size: 16px;

    color: #fff;

    background: #08080a;

    cursor: pointer;

    position: relative;

    z-index: 0;

    border-radius: 10px;

}



.glow-on-hover:before {

    content: '';

    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);

    position: absolute;

    top: -2px;

    left:-2px;

    background-size: 400%;

    z-index: -1;

    filter: blur(5px);

    width: calc(100% + 4px);

    height: calc(100% + 4px);

    animation: glowing 20s linear infinite;

    opacity: 0;

    transition: opacity .3s ease-in-out;

    border-radius: 10px;

}



.glow-on-hover:active {

    color: #2c118b

}



.glow-on-hover:active:after {

    background: transparent;

}



.glow-on-hover:hover:before {

    opacity: 1;

}



.glow-on-hover:after {

    z-index: -1;

    content: '';

    position: absolute;

    width: 100%;

    height: 100%;

    background: #300e8e;

    left: 0;

    top: 0;

    border-radius: 10px;

}



@keyframes glowing {

    0% { background-position: 0 0; }

    50% { background-position: 400% 0; }

    100% { background-position: 0 0; }

}





  .navcomp {

    font-size: 20px;

    font-weight: 500;

    font-family: "Raleway",sans-serif;

    background-image: linear-gradient(

      to right,

      #3cebdc,

      #f30808 50%,

      #0869f1 50%

    );

    background-size: 200% 100%;

    background-position: -100%;

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    transition: all 0.3s ease-in-out;

  }

  .navcomp:hover {

    background-position: 0;

   }



   .navcomp:hover::before {

    width: 100%;

  }



  .home{

    align-items: center;

    padding-left: 50px;

    padding-top: 100px;

    padding-bottom: 100px;

    padding-right: 50px;

    justify-content: center;

  }



  .highlight{

    font-weight: 700;

    text-decoration: solid;

    text-align: center;

    font-size: 50px;

    color: white;

    padding-bottom: 20px;

    text-shadow: 3px 4px 7px rgba(16, 8, 231, 0.8);

  }

  .dep{

    font-family: "Quicksand",sans-serif;

    font-size: 40px;

    text-align: center;

    color: #1f132f;



text-shadow: 0px 11px 10px rgba(81,67,21,0.8);

  }



  *,

  *::before,

  *::after {

    box-sizing: border-box;

  }

  

  :root {

    --color-primary: #f6aca2;

    --color-secondary: #f49b90;

    --color-tertiary: #f28b7d;

    --color-quaternary: #f07a6a;

    --color-quinary: #ee6352;

    /*

    --color-primary: #5192ED;

    --color-secondary: #69A1F0;

    --color-tertiary: #7EAEF2;

    --color-quaternary: #90BAF5;

    --color-quinary: #A2C4F5;

    */

  }

  

  

  .content {

    display: flex;

    align-content: center;

    justify-content: center;

  }

  

  .text_shadows {

    text-shadow: 3px 3px 0 var(cyan), 6px 6px 0 var(cyan),

      9px 9px var(cyan), 12px 12px 0 var(cyan);

      font-family: 'Brush Script MT', cursive;

    font-weight: 400;

    text-transform: uppercase;

    font-size: calc(2rem + 5vw);

    text-align: center;

    margin: 0;

    color: rgb(215, 199, 21);

    animation: shadows 1.2s ease-in infinite, move 1.2s ease-in infinite;

    letter-spacing: 0.4rem;

  }

  

  @keyframes shadows {

    0% {

      text-shadow: none;

    }

    10% {

      text-shadow: 3px 3px 0 var(cyan);

    }

    20% {

      text-shadow: 3px 3px 0 var(cyan),

        6px 6px 0 var(cyan);

    }

    30% {

      text-shadow: 3px 3px 0 var(--color-secondary),

        6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary);

    }

    40% {

      text-shadow: 3px 3px 0 var(--color-secondary),

        6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary),

        12px 12px 0 var(--color-quinary);

    }

    50% {

      text-shadow: 3px 3px 0 var(cyan),

        6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary),

        12px 12px 0 var(--color-quinary);

    }

    60% {

      text-shadow: 3px 3px 0 var(cyan),

        6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary),

        12px 12px 0 var(--color-quinary);

    }

    70% {

      text-shadow: 3px 3px 0 var(cyan),

        6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary);

    }

    80% {

      text-shadow: 3px 3px 0 var(cyan),

        6px 6px 0 var(--color-tertiary);

    }

    90% {

      text-shadow: 3px 3px 0 var(cyan);

    }

    100% {

      text-shadow: none;

    }

  }

  

  @keyframes move {

    0% {

      transform: translate(0px, 0px);

    }

    40% {

      transform: translate(-12px, -12px);

    }

    50% {

      transform: translate(-12px, -12px);

    }

    60% {

      transform: translate(-12px, -12px);

    }

    100% {

      transform: translate(0px, 0px);

    }

  }



.space{

    padding-top: 100px;

}

.about{

    margin-top: 100px;

    padding-top:100px;

    margin-left: 50px;

    margin-right: 50px;

}



.line {

    position: relative;

    text-align: center;

    color: white;

    text-decoration: none;

  }

  

  .line:hover {

    color: #000;

  }

  

  .line::before {

    content: "";

    position: absolute;

    display: block;

    width: 100%;

    height: 2px;

    bottom: 0;

    left: 0;

    background-color: #000;

    transform: scaleX(0);

    transition: transform 0.3s ease;

  }

  

  .line:hover::before {

    transform: scaleX(1);

  }



  .about p{

    text-align: center;

    padding-left: 50px;

    padding-right: 50px;

    padding-top: 20px;

  }

  .about section{

    background-color: rgba(82, 83, 83, 0.618);

    padding-top: 50px;

    padding-bottom: 20px;

    border-radius: 10px;

  }



  @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');





  .timer {



    font-size: 60px;

    font-family: 'Teko', sans-serif;

    font-weight: bold;

    justify-content: center;

    letter-spacing: 0;

    padding: .25em 0 .325em;

    display: block;

    text-align: center;

    margin: 0 auto;

    text-shadow: 0 0 80px rgba(255,255,255,.5);

  

  /* Clip Background Image */

  

    background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y;

    -webkit-background-clip: text;

    background-clip: text;

  

  /* Animate Background Image */

  

    -webkit-text-fill-color: transparent;

    -webkit-animation: aitf 80s linear infinite;

  

  /* Activate hardware acceleration for smoother animations */

  

    -webkit-transform: translate3d(0,0,0);

    -webkit-backface-visibility: hidden;

  

  }

  

  

  /* Animate Background Image */

  

  @-webkit-keyframes aitf {

  0% { background-position: 0% 50%; }

  100% { background-position: 100% 50%; }

  }

  .damo{

    background-color: transparent;

  }



.container{

  position: relative;

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  align-items: center;

  width: 100%;

  height: 100%;

}



/*Styles for product card*/



.product .product-card{

  z-index: 1;

  background: #1D212B;

  position: relative;

  width: 300px;

  height: 400px;

  margin: 40px;

  border-radius: 10px;

}



.product .product-card:before{

  content: '';

  background: rgba(255, 255, 255, 0.1);

  position: absolute;

  display: block;

  top: 0;

  left: 0;

  width: 50%;

  height: 100%;

  border-top-left-radius: 10px;

  border-bottom-left-radius: 10px;

}



.product .product-card .product-img{

  z-index: 1;

  position: absolute;

  max-width: 350px;

  top: 30%;

  left: 50%;

  transform: translate(-50%, -50%);

}



.product .product-card .name{

  z-index: 2;

  color: #fff;

  padding-top: 50px;

  position: absolute;

  width: 100%;

  text-align: center;

  bottom: 120px;

  font-size: 20px;

  letter-spacing: 1px;

}



.product .product-card .price{

  z-index: 2;

  color: #fff;

  position: absolute;

  width: 100%;



  text-align: center;

  right: 1%;

  bottom: 80px;

  font-size: 30px;

  font-weight: 300;

}



.product .product-card .popup-btn{

  z-index: 2;

  color: #fff;

  background: #555;

  position: absolute;

  bottom: 20px;

  left: 50%;

  transform: translateX(-50%);

  font-size: 14px;

  text-transform: uppercase;

  text-decoration: none;

  letter-spacing: 1px;

  padding: 10px 15px;

  border-radius: 20px;

  cursor: pointer;

}



/*Styles for popup view*/



.product .popup-view{

  z-index: 2;

  background: rgba(255, 255, 255, 0.5);

  position: fixed;

  top: 0;

  right: 0;

  bottom: 0;

  left: 10;

  display: flex;

  justify-content: center;

  align-items: center;

  opacity: 0;

  visibility: hidden;

  transition: 0.5s;

}



.product .popup-view.active{

  opacity: 1;

  visibility: visible;

}



.product .popup-card{

  position:fixed;

  justify-content: center;

  left: 30%;

  width: 800px;

  height: 500px;

  margin: 20px;

}



.product .popup-card .product-img{

  z-index: 2;

  background: #1D212B;

  position: relative;

  display: flex;

  justify-content: center;

  align-items: center;

  width: 45%;

  height: 90%;

}



.product .popup-card .product-img img{

  z-index: 2;

  position: relative;

  width: 450px;

  left: 20px;

}



.product .popup-card .info{

  z-index: 2;

  background: #999494;

  display: flex;

  flex-direction: column;

  width: 55%;

  height: 100%;

  box-sizing: border-box;

  padding: 40px;

  border-radius: 10px;

  overflow-y: auto;

}



.product .popup-card .close-btn{

  color: #555;

  z-index: 3;

  position: absolute;

  left: 0;

  font-size: 20px;

  margin: 20px;

  cursor: pointer;

}



.product .popup-card .info h2{

  font-size: 40px;

  line-height: 20px;

  margin: 10px;

}



.product .popup-card .info h2 span{

  font-size: 15px;

  text-transform: uppercase;

  letter-spacing: 2px;

}



.product .popup-card .info p{

  font-size: 15px;

  margin: 10px;

}



.product .popup-card .info .price{

  font-size: 45px;

  font-weight: 300;

  margin: 10px;

}



.product .popup-card .info .add-cart-btn{

  color: #fff;

  background: #009DD2;

  font-size: 16px;

  font-weight: 600;

  text-align: center;

  text-decoration: none;

  text-transform: uppercase;

  margin: 10px auto;

  padding: 10px 50px;

  border-radius: 20px;

}



.product .popup-card .info .add-wish{

  color: #009DD2;

  font-size: 16px;

  text-align: center;

  font-weight: 600;

  text-transform: uppercase;

}



/*Responsive styles*/



@media (max-width: 900px){

  .highlight{

    font-size: large;

  }

  .timer{

    font-size: x-large;

  }

  .dep{

    font-size: large;

  }

  .text_shadows{

    font-weight: bold;

    font-size: xx-large;

  }

  #space{

    display: hidden;

  }

  .home{

    margin-top: 20%;

    padding-top: 10%;

  }

  .product .popup-card{

    position:fixed;

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    align-items: flex-start;

    left: 10%;

    width: 300px;

    height: auto;

  }



  .product .popup-card .product-img{

    z-index: 3;

    width: 100%;

    height: 200px;

    transform: translateY(0);

  }



  .product .popup-card .product-img img{

    left: initial;

    max-width: 100%;

  }



  .product .popup-card .info{

    width: 100%;

    justify-content: center;

    padding: 20px;

  }



  .product .popup-card .info h2{

    margin: 20px 5px 5px 5px;

    font-size: 25px;

  }



  .product .popup-card .info h2 span{

    font-size: 10px;

  }



  .product .popup-card .info p{

    margin: 5px;

    font-size: 13px;

  }



  .product .popup-card .info .price{

    margin: 5px;

    font-size: 30px;

  }



  .product .popup-card .info .add-cart-btn{

    margin: 5px auto;

    padding: 5px 40px;

    font-size: 14px;

  }



  .product .popup-card .info .add-wish{

    font-size: 14px;

  }



  .product .popup-card .close-btn{

    z-index: 4;

  }

}

      

.Event{

    margin-top: 100px;

    padding-left: 50px;

    padding-right: 50px;

    margin-bottom: 100px;

    max-height: max-content;

}

ani{

  width: 100px;

  height: 100px;

  position: relative;

  color: white;

  text-shadow: 3px 4px 7px rgba(16, 8, 231, 0.8);

  animation-name: mymove;

  animation-duration: 5s;

}



@keyframes mymove {

  from {left: 500px;}

  to {left: 0px;}

}



.contact{

  margin-top: 100px;

    padding-left: 50px;

    padding-right: 50px;

    margin-bottom: 100px;

    max-height: max-content;

}



.s-icons{

  z-index: 2;

  color: #fff;

  position: absolute;

  width: 100%;

  display: flex;

  justify-content: space-around;

  bottom: 30px

}



.e-flex{

  display: flex;

  flex-wrap: wrap;

  flex-direction: row;

  justify-content: center;

}