*{
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    box-sizing: border-box;
    
}


nav{
    width: 100%;
    height: fit-content;
    display: flex;
    align-items: center;
    margin-top: 0%;
    background: transparent;
    position: relative; 
}

nav img{
   width: 65px;
   height: 65px;
   position: relative;
   top: 5px;
   left: 5px;
   border-radius: 50%;
   justify-content: center;
   align-items: center;
   z-index: 999999999999999999999;
}


.menubar { 

    display: flex;
    justify-content: center; /* Centers content horizontally */
    align-items: center;      /* (Optional) Centers vertically */
    text-align: center;
    z-index: 11;
    margin: 0;
   
}
.menubar h1 {
  position: absolute;              /* stays centered even on scroll */
  top: 60%;                     /* move to vertical center */
  left: 50%;                    /* move to horizontal center */
  transform: translate(-50%, -50%); /* pull back by half width & height */
  font-size: 35px;
  color: #2575fc;
  
  
}

@media(max-width: 481px){
.menubar h1{
    font-size: 16px;  
}
}

@media(max-width: 768px){
.menubar h1{  
   font-size: 27px;
   
}

}




/* Small phones (≤480px) */
@media (max-width: 481px) {
    nav img{
        width: 56px;
        height: 56px;
    }
}

/* Medium devices (481px–768px) */
@media (min-width: 481px) and (max-width: 768px) {
   
     nav img{
        width: 54px;
        height: 54px;
    }
}

/* Large screens (769px–1200px) */
@media (min-width: 768px) and (max-width: 1200px) {
 
     nav img{
        width: 65px;
        height: 65px;
    }
}

/* Extra large desktop / 4K screens */
@media (min-width: 1201px) {
  
     .nav img{
        width: 72px;
        height: 72px;
    }
}














html,body{
    width: 100%;
    height: 100%;
    scroll-behavior: smooth;

}
 

#main{
    width: 100%;
    height: 100%; 
    background-image: url('slideimages/img1.gif');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: transparent; 
    justify-content: center;
    align-items: center;

}

#center {
 
  text-align: center;
  position: absolute;
  justify-content: center;
  width: 100%;
  height: 100%;
  display: flex; 
  gap: 10px;
  
}

.imagecontainer {
  position: absolute; 
  overflow: hidden;
  width: 0%;
  height: 100%;
  flex-shrink: 0; 
  transition: none; 
 
  
  
}

.imagecontainer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: center;
}


@media (max-width: 366px) {

    #center {
    width: 100%; 
    height: 45vh; 
    }

    #main{
    width: 100%;
    height: 45vh; 
    }

  .imagecontainer img {
   width: 366px;
   height: 45vh; 
   }
}








@media (max-width: 480px) {

    #center {
    width: 100%; 
    height: 50vh; 
    }

    #main{
    width: 100%;
    height: 50vh; 
    }

  .imagecontainer img {
   width: 485px;
   height: 50vh; 
   }
}

/* Medium Screens (481px–768px) */
@media (min-width: 481px) and (max-width: 768px) {
    #center {
        width: 100%; 
        height: 70vh;
    }
    #main{
    width: 100%;
    height: 70vh; 
    }
  .imagecontainer img {
   min-width: 500px;
   max-width: 770px;
   height: 70vh; 
   }  
}



/* Large Screens (769px and above) */
@media (min-width: 769px) {
   
}




/* Large Screens (769px and above) */
@media (min-width: 769px) {
   
}








.float-btn {
  right: 12px;
  bottom: 12px;
    }


.float-btn {

    cursor: pointer; /* instead of grab */
    touch-action: auto;
}
.float-btn:active {
    cursor: pointer; /* remove grabbing effect */
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: gray;
 /* background: rgb(229, 137, 195);*/
  z-index: 999999; /* lower than .float-btn and menu */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.8s ease; 
}

.overlay.active {
  opacity: 0.7;
  pointer-events: auto;
}

  .menu a.show{
    opacity:1;
    transform:scale(1);
    pointer-events:auto;
  }


   .menu a{
    position:fixed;
    display:flex; 
    align-items:center; 
    justify-content:center;
    width:68px;
    height:68px;
    font-size: 13px;
    border-radius:50%;
    color: #fcfbf9;
    background-color: #2575fc;
    text-decoration:none; 
    font-weight:500;
    box-shadow:0 6px 14px rgba(17, 16, 16, 0.12);
    pointer-events:auto;
    z-index:2147483647;
     transform:scale(0.3);
    transition:opacity .25s;
    transition:opacity .4s ease, transform .4s ease;
    opacity:0;
  }
    
  .menu a.show{opacity:1;}


:root {
    --float-size: 60px;      /* default button size */
    --float-font: 28px;      /* default icon font size */
    --menu-radius: 120px;    /* distance of links from button */
}

/* Floating Button Styles */
.float-btn {
    width: var(--float-size);
    height: var(--float-size);
    border-radius: 50%;
    color: #fcfbf9;
    background-color: #2575fc;
    font-size: var(--float-font);
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    padding: 10px 5px 10px;
    top: 5px;
    right: 5px;
    z-index: 300;
    box-shadow: 0 6px 18px rgba(0,0,0,.24);
    cursor: grab;
    user-select: none;
    touch-action: none;
}

  .float-btn:active{cursor:grabbing}


/* ---------- Responsive Sizes ---------- */

/* Small phones (≤480px) */


@media (max-width: 481px) {
    :root {
        --float-size: 56px;
        --float-font: 22px;
        --menu-radius: 80px;
    }
    .float-btn {
        right: 5px;
        bottom: 12px;
    }
    .menu a {
        width: 60px;
        height: 60px;
        font-size: 15px;
        line-height: 20px;
        padding: 4px;
    }
}

/* Medium devices (481px–768px) */
@media (min-width: 481px) and (max-width: 768px) {
    :root {
        --float-size: 54px;
        --float-font: 24px;
        --menu-radius: 95px;
    }
    .menu a {
        width: 54px;
        height: 54px;
        font-size: 10px;
        line-height: 24px;
        padding: 9px;
    }
}

/* Large screens (769px–1200px) */
@media (min-width: 768px) and (max-width: 1200px) {
    :root {
        --float-size: 65px;
        --float-font: 28px;
        --menu-radius: 110px;
    }

    .menu a {
        width: 65px;
        height: 65px;
        font-size: 12px;
        line-height: 24px;
        padding: 9px;
    }
}

/* Extra large desktop / 4K screens */
@media (min-width: 1201px) {
    :root {
        --float-size: 72px;
        --float-font: 32px;
        --menu-radius: 130px;
    }
    .menu a {
        width: 72px;
        height: 72px;
        font-size: 16px;
        line-height: 28px;
        padding: 12px;
    }
}



.float-btn.centered {
  position: fixed;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%);
}



/*phone-call-icon */

.phone-call{
    color: #fcfbf9;
    background-color: #2575fc;
    text-decoration: none;
    border: 2px solid rgb(253, 254, 255);
    border-radius: 50%;
    position: fixed;
    bottom: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    z-index: 200;
    opacity: 1;
    pointer-events: all;
    transition: all 6s;
    animation: glow 2s infinite ease-in-out;

    /*animation: glow 1.1s infinite;*/

    

}
@keyframes glow {
    0% {
    box-shadow: 
      0 0 3px rgb(112, 141, 234),
      0 0 6px rgb(31, 16, 204);
    transform: scale(1) translateY(0);
  }

  25% {
    box-shadow: 
      0 0 6px rgb(50, 59, 245),
      0 0 9px rgb(125, 151, 230);
    transform: scale(1.05) translateY(-2px);
  }

  50% {
    box-shadow: 
      0 0 9px rgb(49, 24, 236),
      0 0 6px rgb(44, 50, 136);
    transform: scale(1.1) translateY(2px);
  }

  75% {
    box-shadow: 
      0 0 6px rgb(71, 93, 255),
      0 0 3px rgb(120, 135, 247);
    transform: scale(1.05) translateY(-2px);
  }

  100% {
    box-shadow: 
      0 0 5px rgb(12, 36, 191),
      0 0 10px rgb(8, 2, 77);
    transform: scale(1) translateY(0);
  }

  }
/****Text content****/


.text-content{
    color: darkblue;
    text-align: center;
    justify-content: center;
    margin-top: 5px;
    margin-bottom: 5px;
    padding: 10px;
  }


.text-content h1 {
  position: relative;
  font-size: 25px;
  color: crimson;
  opacity: 0;
  animation: slideGlow 2s ease-out forwards;
}


@keyframes slideGlow {
  0% {
    opacity: 0;
    transform: translateX(-0%);
 
  }
  50% {
    opacity: 1;
    transform: translateX(10%);
 
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  
    
  }
}


.text-content h2 {
  position: relative;
  font-size: 25px;
  color: crimson;
  opacity: 0;
  animation: slideGlowRight 2s ease-out forwards;
}

/* Keyframes for right-to-left motion */
@keyframes slideGlowRight {
  0% {
    opacity: 0;
    transform: translateX(0%);
  }
  50% {
    opacity: 1;
    transform: translateX(-10%);
  }
  100% {
    opacity: 1;
    transform: translateX(0%);
  }
}




.text-content h4 {
  position: relative;
  text-align: justify;
  background-color: white;
  opacity: 0;
  animation: slidebuttom 2s ease-out forwards;
}


@keyframes slidebuttom {
  0% {
    opacity: 0;
    transform: translateY(100%);
 
  }
  50% {
    opacity: 1;
    transform: translateY(-5%);
 
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  
    
  }
}

  
  @media (min-width: 481px){
  .text-content h1{
    font-size: 23px;
  }
  
  .text-content h2{
    font-size: 23px;
  }

  
  .text-content h4{
    font-size: 19px;
  }
  
}
 
@media (min-width: 481px) and (max-width: 768px) {
 .text-content h1{
    font-size: 26px;
  }
  
  .text-content h2{
    font-size: 26px;
  }

  .text-content h4{
    font-size: 22px;
  }



}



/********footer**********/
   .copyrightText {
    width: 100%;
    position: relative;
   
    text-align: center;
    font-size: 14px;
     background-color:  #2575fc;
    border-radius: 1px solid white;
   
}
.copyrightText p{
    font-size: 12px;
    padding: 12px;
    color: white;
  
}