@font-face {
    font-family: 'play font';
    src: url('/src/font/PlayfairDisplay-Italic-VariableFont_wght.ttf'); 
  }
.home{
    width: 100%;
    background-color: #ffffff;
    position: absolute;
    top: 15%;
}
.ftxt{
    position: absolute;
    margin-top: -30%;
    z-index: 2;
    color: #ffffff;
    text-align: center;
}
.ftxt h1{
    font-size: 150px;
    -webkit-text-stroke-width: 3px;
    font-family: 'play font';
    animation: fname-animation 3s initial;

    
 
}   
.ftxt h2{
    font-size: 100px;
    color: #00274f;
    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: rgb(7, 7, 7);
    font-family: 'play font';
    animation: fname1-animation 3s infinite linear;
}
@keyframes   fname-animation{
    from{
        transform: scale(0.5);
    }
    to{
        transform: scale(1.0);
    }
    
}
@keyframes   fname1-animation{
    from{
        transform: scale(0.5);
    }
    to{
        transform: scale(1.0);
    }
    
}
.para1 p {
    border-right: solid 3px rgba(0,255,0,.75);
    white-space: nowrap;
    overflow: hidden;    
    font-family: 'Source Code Pro', monospace;  
    font-size: 28px;
    color: rgba(8, 8, 8, 0.7);
    text-align: center;
    margin-top: 2%;
    margin-bottom: 2%;
  }
  
  /* Animation */
  .para1 p {
    animation: animated-text 4s steps(29,end) 1s 1 normal both,
               animated-cursor 600ms steps(29,end) infinite;
  }
  
  /* text animation */
  
  @keyframes animated-text{
    from{width: 0;}
    to{width: 99%;
        height: 30%;}
  }
  
  /* cursor animations */
  
  @keyframes animated-cursor{
    from{border-right-color: rgba(247, 248, 247, 0.75);}
    to{border-right-color: transparent;}
  }
  .cont{
    width: 80%;
    margin-left: 10%;
    padding: 20px;
  }
  .cont h2{
    font-size: 30px;
    text-align: center;
    padding: 20px;
    background-color: #b8e0e0;
    border-radius: 30px 0px;
    box-shadow: #616263 10px 10px 5px;
    width: 28%;
    margin-left: 35%;
  }
  .cont p{
    font-size: 24px;
    text-align: center;
    line-height: 2.0;
    padding:10px;
  }
  .container {
    position: relative;
    top: -25px;
  }
  /* The Hamburger icon with the menu */
      a {
        text-decoration: none;
        color: #232323;
        -webkit-transition: color 0.3s ease;
        transition: color 0.3s ease;
      }
      
      a:hover {
        color: #b6944c;
      }
      
      #menuToggle {
        display: block;
        position: relative;
        top: 60px;
        left: 60px;
        z-index: 1;
        -webkit-user-select: none;
        -moz-user-select: none;
         -ms-user-select: none;
             user-select: none;
      }
      
      #menuToggle input {
        display: block;
        width: 40px;
        height: 32px;
        position: absolute;
        top: -7px;
        left: -5px;
        cursor: pointer;
        opacity: 0; /* hide this */
        z-index: 2; /* and place it over the hamburger */
        -webkit-touch-callout: none;
      }
      
      
      #menuToggle span {
        display: block;
        width: 33px;
        height: 4px;
        margin-bottom: 5px;
        position: relative; 
        background: #b6944c;
        border-radius: 3px;
        z-index: 1;
        
        -webkit-transform-origin: 4px 0px;
                transform-origin: 4px 0px;
        
        -webkit-transition: background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                    opacity 0.55s ease,
                    -webkit-transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
        
        transition: background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                    opacity 0.55s ease,
                    -webkit-transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
        
        transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                    background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                    opacity 0.55s ease;
        
        transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                    background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                    opacity 0.55s ease,
                    -webkit-transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
      }
      
      #menuToggle span:first-child {
        -webkit-transform-origin: 0% 0%;
                transform-origin: 0% 0%;
      }
      
      #menuToggle span:nth-last-child(2) {
        -webkit-transform-origin: 0% 100%;
                transform-origin: 0% 100%;
      }
      
      /* Transform all the slices of hamburger into a crossmark. */
      #menuToggle input:checked ~ span {
        opacity: 1;
        -webkit-transform: rotate(45deg) translate(-2px, -1px);
                transform: rotate(45deg) translate(-2px, -1px);
        background: #232323;
      }
      
      /* But let's hide the middle one.*/
      #menuToggle input:checked ~ span:nth-last-child(3)
      {
        opacity: 0;
        -webkit-transform: rotate(0deg) scale(0.2, 0.2);
                transform: rotate(0deg) scale(0.2, 0.2);
      }
      
      /* And the last one should go the other direction */
      #menuToggle input:checked ~ span:nth-last-child(2)
      {
        opacity: 1;
        -webkit-transform: rotate(-45deg) translate(0, -1px);
                transform: rotate(-45deg) translate(0, -1px);
      }
      
  
      #menu {
        position: absolute;
        width: 100px;
        margin: -60px 0 0 -60px;
        padding: 40px;
        padding-top: 100px;
        background: #cdcdba;
        list-style-type: none;
        -webkit-transform-origin: 0% 0%;
        
                transform-origin: 0% 0%;
        -webkit-transform: translate(-100%, 0);
                transform: translate(-100%, 0);
        
        -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
        
        transition: -webkit-transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
        
        transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
        
        transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0), -webkit-transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
      }
      
      #menu li{
        padding: 10px 0;
        font-size: 1.2rem;
        font-family: 'Century Gothic', sans-serif;
      }
      
  
      #menuToggle input:checked ~ ul {
        -webkit-transform: scale(1.0, 1.0);
                transform: scale(1.0, 1.0);
        opacity: 1;
      }
  
  .img-fill{
    width: 100%;
    display: block;
    overflow: hidden;
    position: relative;
    text-align: center
  }
  
  .img-fill img {
    height: 100%;
    width: 100%;
    position: relative;
    display: inline-block;
    max-width: none;
  }
  
  .blocks-box,
  .slick-slider {
    margin: 0;
    padding: 0!important;
  }
  
  .slick-slide {
    float: left /* If RTL Make This Right */ ;
    padding: 0;
  }
  
  /* ==== Slider Style === */
  .slideshow .item .img-fill{
    height:100vh;
    background:rgba(182,148,64,.50);
  }
  
  .slideshow .item .img-fill .info{
    position:absolute;
    min-width:100%;
    height:100%;
    right:5%;
    top: -45%;
    line-height:100vh;
    text-align:right;
  }
  
  .slideshow .item .info > div{
    display:inline-block!important;
  }
  
  .slideshow .NextArrow{
    position:absolute;
    top:50%;
    right:0px;
    width:45px;
    height:45px;
    background:rgba(182,148,64,.60);
    border:0 none;
    margin-top:-22.5px;
    text-align:center;
    font:20px/45px FontAwesome;
    color:#FFF;
    z-index:5;
  }
  
  .slideshow .NextArrow:before{content:'\f105';}
  
  .slideshow .PrevArrow{
    position:absolute;
    top:50%;
    left:0px;
    width:45px;
    height:45px;
    background:rgba(182,148,64,.60);
    border:0 none;
    margin-top:-22.5px;
    text-align:center;
    font:20px/45px FontAwesome;
    color:#FFF;
    z-index:5;
  }
  
  .slideshow .PrevArrow:before{content:'\f104';}
  
  .slideshow .slick-dots{
    position:absolute;
    height:5px;
    background:rgba(255,255,255,.20);
    bottom:0px;
    width:100%;
    left:0px;
    padding:0px;
    margin:0px;
    list-style-type:none;
  }
  .slideshow .slick-dots li button{display:none;}
  .slideshow .slick-dots li{
    float:left;
    width:0px;
    height:5px;
    background:#B6944C;
    position:absolute;
    left:0px;
    bottom:0px;
  }
  
  .slideshow .slick-dots li.slick-active{
    width:100%;
    -webkit-animation:ProgressDots 6s both;
            animation:ProgressDots 6s both;
  }
  
  .slideshow .item h3{
    font-family: 'Century Gothic', sans-serif;
    font-size: 1.6rem;
    text-transform:uppercase;
    color:#B6944C;
    -webkit-animation:fadeIn 1s both;
            animation:fadeIn 1s both;
    margin:0;
    padding:0;
  }
  
  .slideshow .item.slick-active h3{
    -webkit-animation:fadeIn 1s both 1s;
            animation:fadeIn 1s both 1s;
  }
  
  
  .slideshow .item img{
    -webkit-animation:fadeIn 1s both;
            animation:fadeIn 1s both;
  }
  
  .slideshow .item.slick-active img{
    -webkit-animation:fadeIn 1s both;
            animation:fadeIn 1s both;
  }
  
  
  @-webkit-keyframes ProgressDots{from{width:0px;}to{width:100%;}}
  @keyframes ProgressDots{from{width:0px;}to{width:100%;}}
  
  /* ==== Slick Slider Css Ruls === */
  .slick-slider{position:relative;display:block;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
  .slick-list{position:relative;display:block;overflow:hidden;margin:0;padding:0}
  .slick-list:focus{outline:none}.slick-list.dragging{cursor:hand}
  .slick-slider .slick-track,.slick-slider .slick-list{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
  .slick-track{position:relative;top:0;left:0;display:block}
  .slick-track:before,.slick-track:after{display:table;content:''}.slick-track:after{clear:both}
  .slick-loading .slick-track{visibility:hidden}
  .slick-slide{display:none;float:left /* If RTL Make This Right */ ;height:100%;min-height:1px}
  .slick-slide.dragging img{pointer-events:none}
  .slick-initialized .slick-slide{display:block}
  .slick-loading .slick-slide{visibility:hidden}
  .slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent}

  .o1{
    color: #a370a7;
  }
  .o2{
    color: #3ebca4;
  }
  .o3{
    color: #feaf37;
  }
  .o4{
    color: #594d93;
  }
  .o5{
    color: #3cbda5;
  }
  .o6{
    color: #8f4898;
  }
  .o7{
    color: #06bae8;
  }
  .o8{
    color: #08a69a;
  }
  .o9{
    color: #42bda7;
  }
  .o10{
    color: #c166a4;
  }
  .o11{
    color: #d5e599;
  }
  .o12{
    color: #0180c2;
  }
/* Style the slideshow container */
.slideshow-container {
  position: relative;
  width: 100%; /* Set the width of the slideshow */
  height: 250px; /* Set the height of the slideshow */
  margin: 40px auto;
  overflow: hidden;
}

/* Style the slideshow images */
.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.5s; /* Add a transition effect to the images */
}

/* Style the navigation buttons */
.prev, .next {
  position: absolute;
  top: 90%;
  transform: translateY(-50%);
  cursor: pointer;
  width: 6%;
  border: none;
  background-color: #8f4898;
  color: white;
  padding: 5px;
  text-align: center;
 
}

.prev {
  left: 20px;
  border-radius: 30px 0px 0px 30px;
}

.next {
  right: 20px;
  border-radius: 0px 30px 30px 0px;
}

/* Add a hover effect to the navigation buttons */
.prev:hover, .next:hover {
  background-color: #ccc;
  color: #333;
}
.slide h2{
  position: absolute;
  top: 5%;
  font-weight: bold;
  font-size: 100px;
  left: 2%;
}
.slide p{
  position: absolute;
  top: 50%;
  font-size: 28px;
  font-weight: bold;
  left: 2%;
  background-color: #06bae8;
  width: auto;
  padding: 10px;
  border-radius: 30px 0px;
}
.slide img{
  opacity: 0.9;
}
.slide a{
  position: absolute;
  background-color: #594d93;
  top: 20%;
  text-align: center;
  z-index: 999;
  color: white;
  width: 20%;
  left: 110%;
  padding: 10px;
  border-radius: 30px;
}
.hacker{
  font-size: 30px;
  text-align: center;
  padding: 20px;
  background-color: #b8e0e0;
  border-radius: 30px 0px ;
  box-shadow: #616263 10px 10px;
  width: 28%;
  margin-left: 35%;
}
.slide a:hover{
  background-color: white;
  color: black;
}
.para2 p {
  border-right: solid 3px rgba(0,255,0,.75);
  white-space: nowrap;
  overflow: hidden;    
  font-family: 'Source Code Pro', monospace;  
  font-size: 28px;
  color: rgba(8, 8, 8, 0.7);
  text-align: center;
  margin-top: 2%;
  margin-bottom: 2%;
}

/* Animation */
.para2 p {
  animation: animated-text 10s steps(50,end) 1s 1 normal both,
             animated-cursor 1000ms steps(50,end) infinite;
}

/* text animation */

@keyframes animated-text{
  from{width: 0;}
  to{width: 99%;
      height: 30%;}
}

/* cursor animations */

@keyframes animated-cursor{
  from{border-right-color: rgba(247, 248, 247, 0.75);}
  to{border-right-color: transparent;}
}
.indimg1{
  display: flex;
  column-gap: 5%;
  width: 90%;
  margin-left: 5%;
}
.iimg img{
  height: 250px;
}
.iimg h1{
  text-align: center;
  height: 250px;
  margin-top: -50%;
  display: none;
}
.iimg:hover .iip{
  display: block;
}
.iimg:hover img{
  opacity: 0.2;
}
footer{
  background-color: #b839a7;
  margin-top: 5%;
}
.map{
  width: 40%;
}
.cop{
  color: white;
  text-align: center;
}
.con{
  display: flex;
}
.maxb{
  width: 50%;
  margin-left: 2%;
  padding: 3%;
  color: white;
}
.maxb h2{
  text-align: center;
  padding: 10px;
  font-size: 30px;
  text-transform: uppercase;
  background-color: #08a69a;
}
.contact11{
  display: flex;
  column-gap: 1%;
  padding: 10px;
}

.contact12 p{
  font-size: 24px;
  color: white;
  line-height: 1.5;
  
}
@media (max-width : 800px) {
  .con{
    display: block;
  }
  .contact11{
    display: block;
    column-gap: 1%;
    padding: 10px;
  }
  .ftxt h1{
    font-size: 50px;
    -webkit-text-stroke-width: 3px;
    font-family: 'play font';
    animation: fname-animation 3s initial;

    
 
}   
.ftxt h2{
    font-size: 30px;
    color: #00274f;
    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: rgb(7, 7, 7);
    font-family: 'play font';
    animation: fname1-animation 3s infinite linear;
}
.para1 p {
  border-right: solid 3px rgba(0,255,0,.75);
  white-space: nowrap;
  overflow: hidden;    
  font-family: 'Source Code Pro', monospace;  
  font-size: 18px;
  color: rgba(8, 8, 8, 0.7);
  text-align: center;
  margin-top: 2%;
  margin-bottom: 2%;
}
.cont h2{
  font-size: 24px;
  text-align: center;
  padding: 20px;
  background-color: #b8e0e0;
  border-radius: 30px 0px;
  box-shadow: #616263 10px 10px 5px;
  width: 50%;
  margin-left: 15%;
}
.cont p{
  font-size: 18px;
  text-align: center;
  line-height: 2.0;
  padding:10px;
  margin-left: -5%;
}
.slide p{
  position: absolute;
  top: 50%;
  font-size: 18px;
  font-weight: bold;
  left: 2%;
  background-color: #06bae8;
  width: auto;
  padding: 10px;
  border-radius: 30px 0px;
}
.para2 p {
  border-right: solid 3px rgba(0,255,0,.75);
  white-space: nowrap;
  overflow: hidden;    
  font-family: 'Source Code Pro', monospace;  
  font-size: 18px;
  color: rgba(8, 8, 8, 0.7);
  text-align: center;
  margin-top: 2%;
  margin-bottom: 2%;
}
.indimg1{
  display: block;
  column-gap: 5%;
  width: 90%;
  margin-left: 5%;
}
.map{
  width: 100%;
}
.contact12 p{
  font-size: 24px;
  color: white;
  line-height: 1.5;
  text-align: center;
}
.contact12{
  margin-left: 40%;
}
footer{
    display:none;
}
.home{
    width: 100%;
    background-color: #ffffff;
    position: absolute;
    top: 25%;
}
}