@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
:root {
  --font-title: 'Poppins', sans-serif;
  --font-subtitle: 'Raleway', sans-serif;
  --font-body: 'Open Sans', sans-serif;

  --primary-clr:#002850;
  --secondary-clr:#ffb000;
  --secondary-clr:yellow;
  --bg-clr1:#ffffff;
  --bg-clr2:#eaeaea;
  --bg-clr3:#dddcdcbd;

  --shade:#e6f0fa;
  --light:#fff5e6;

  --fontSize-2:3.5rem;
  --fontSize-3:3rem;
  --fontSize-4:2rem;
  --fontSize-5:1.6rem;  
  --fontSize-6:1.3rem;  
  --fontSize-7:1.1rem;  
  --fontSize-8:1rem;  
  --fontSize-9:0.9rem;  
  --fontSize-10:0.8rem;  

  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;
  --weight-bold:700;  

  --section-spacing:100px;

  --transition-1:250ms ease;
  --transition-2:500ms ease;
  --cubic-out: cubic-bezier(0.1 , 1 , 0.5, 1);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box;}

li{ list-style:none}
img,span,button,ion-icon{display: block;}
a{ color: inherit; text-decoration: none;}
input, button{ background: none; border: none; font: inherit;}
input{width:100%; outline: none;}
button{cursor: pointer;}
address{font-style: normal;}

html{ scroll-behavior: smooth;}
body {background-color: white;max-width:1500px;}


/*=============================== Text =======================================*/
  h2{
    font-family: var(--font-title);
    font-size: var(--fontSize-4);
    font-weight: var(--weight-semibold);
  }
  h2 span{
    background: -webkit-linear-gradient(60deg,var(--primary-clr) 0%,  var(--secondary-clr) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline;
  }
  p{
   font-size: var(--fontSize-8);
   font-family: var(--font-title);
  }

.radiate{ padding: 0.6em 2em; border: none; outline: none; color: rgb(255, 255, 255); background: var(--primary-clr); cursor: pointer; position: relative; z-index: 0; border-radius: 10px; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.radiate: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); -webkit-filter: blur(5px); width: calc(100% + 4px); height: calc(100% + 4px); animation: glowing-button-85 20s linear infinite; transition: opacity 0.3s ease-in-out; border-radius: 10px; }
@keyframes glowing-button-85 { 0% { background-position: 0 0; } 50% { background-position: 400% 0; } 100% { background-position: 0 0; } }
.radiate:after { z-index: -1; content: ""; position: absolute; width: 100%; height: 100%; background: #222; left: 0; top: 0; border-radius: 10px; }

@media (max-width: 767px){
  h2{ font-size: var(--fontSize-6); }
  p{ font-size: var(--fontSize-9); }
  .radiate{ padding: 0.4em 1.2em; }
}
@media (max-width: 450px){
  h2{ font-size: var(--fontSize-7); } 
  p{ font-size: var(--fontSize-10); }
  .radiate{ font-size: 12px; }
}

/*=============================== Animaion =======================================*/
  .fade-section {
    opacity: 0;
    animation: fade-zoom-in 1s ease-out both;
    animation-timeline: view();
    animation-range: entry 0% cover 30%;
  }

  /* Smooth fade-in with zoom and ease */
  @keyframes fade-zoom-in {
    from {
      opacity: 0.5;
      transform: translateY(50px) scale(0.5);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  @media (max-width:767px){
    /* Scroll-linked animation setup */
    .fade-section {
      animation-range: entry 0% cover 35%;
    }
  }
  @media (max-width:450px){
    .fade-section {
      animation-range: entry 0% cover 30%;
    }
  }

/*===============================Navbar=======================================*/

.navbar{
  width: 80%;
  background: var(--bg-clr1);
  margin: 1% auto 0;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  border-radius: 40px;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  z-index: 10;
}
.navbar .logo img{
  height: 35px;
}
.navbar .nav .navbar-nav li a{ 
  padding: 0 10px; 
  font-size: var(--fontSize-8); 
  font-weight: var(--weight-medium);
  color: var(--primary-clr);
  transition: var(--transition-1);
  font-family: var(--font-title);
}
.navbar .nav .navbar-nav li a:hover{
  transform: scale(1.1);
}
.navbar .nav .navbar-nav li .dropdown-menu a:hover{
  transform: scale(1);
}
.navbar .dropdown:hover .dropdown-menu {
    display: block;
}
.navbar .nav .nav-btn{ 
  font-size: var(--fontSize-9); 
  font-weight: var(--weight-medium);
  font-family: var(--font-title);
  background: var(--secondary-clr);
  padding: 5px 10px;
  letter-spacing: 0.5px;
  border-radius: 20px;
  transition: var(--transition-2);
}
.navbar .nav .nav-btn:hover{ 
  font-family: var(--font-title);
  background: var(--primary-clr);
  color: var(--bg-clr1);
}

@media (max-width: 992px) {

  .navbar{
    width: 90%;
    border-radius: 10px;
  }
  .navbar-toggler{
    border: none !important;
  }
  .navbar-toggler span{
    margin-left: -20px;
  }
  .navbar .nav {
    flex-direction: column;
    margin: 10px 0;
  }
  .navbar .nav .navbar-nav  {
    gap: 5px;
  }
  .navbar .nav  .try{
    margin-top: 10px;
  }
  .navbar .nav .nav-btn{ 
    font-size: var(--fontSize-9); 
    font-family: var(--font-title);
    padding: 3px 8px;
    border-radius: 10px;
  }
}

@media (max-width: 767px){
  .navbar{
   margin: 2% auto 0;
  }
  .navbar .logo img{
    height: 30px;
  }
}
@media (max-width: 450px){
  
  .navbar{
    width: 94%;
    margin: 3% auto 0;
    border-radius: 2px;
    padding: 0;
  }
  .navbar .logo img{
    height: 25px;
  }
  .navbar .nav .navbar-nav li a{ 
    font-size: var(--fontSize-9); 
  }
  .navbar .nav .nav-btn{ 
    font-size: var(--fontSize-10); 
  }
}

/*=============================== Text =======================================*/


    /* Container */
    .social-bar {
      position: fixed;
      bottom: 20px;
      right: 20px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      z-index: 9999;
      /* allow expanded parts to overflow the tiny slot */
      pointer-events: auto;
    }

    /* Each slot keeps identical size and position so siblings do NOT move */
    .social-slot {
      position: relative;
      width: 30px;    /* visible handle size */
      height: 30px;
      overflow: visible; /* allow inner icon to overflow left */
    }

    /* The actual clickable item is absolutely positioned to the right edge */
    .social-slot .icon {
      position: absolute;
      right: 0;
      top: 0;
      width: 30px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      text-decoration: none;
      color: #fff;
      box-shadow: 0 3px 8px rgba(0,0,0,0.22);
      transition: transform 0.5s cubic-bezier(.2,.9,.3,1), box-shadow 0.2s;
      /* keep overflow visible so label can show */
      overflow: visible;
      z-index: 2;
    }

    /* Icon itself */
    .social-slot .icon i {
      width: 30px;
      text-align: center;
      font-size: 16px;
      pointer-events: none; /* clicks handled by anchor */
    }

    /* Label that appears to the left of the circle */
    .social-slot .label {
      position: absolute;
      right: 10px;                /* placed left of the circle */
      top: 0;
      height: 30px;
      display: flex;
      align-items: center;
      padding: 0 14px 0 30px; 
      border-radius: 25px;
      color: #fff;
      white-space: nowrap;
      opacity: 0;
      transform: translateX(10px);
      transition: opacity .5s ease, transform .5s ease;
      z-index: 1;
      pointer-events: none; /* label shouldn't capture pointer */
      font-size: 15px;
      backdrop-filter: blur(4px);
    }

    /* Hover: move only the element inside the slot leftwards */
    .social-slot:hover .icon {
      transform: scale(1.2); 
      box-shadow: 0 6px 14px rgba(0,0,0,0.28);
    }

 

    /* Platform colors (circle) and matching tint for label background */
    .icon.whatsapp { background-color: #25D366; }
    .icon.instagram { background-color: #E1306C; }
    .icon.facebook  { background-color: #1877F2; }
    .icon.youtube   { background-color: #FF0000; }


    
    @media (max-width: 450px) { 
      .social-slot:hover .icon {
        transform: scale(1.1); 
      }
      .social-slot:hover .youtube {
        transform: scale(1.1); 
      }
      .social-slot:hover .facebook {
        transform: scale(1.1); 
      }
    }

/*=============================== Footer =======================================*/


    .contact-area{
     background: var(--primary-clr);
     color: #b6b4b4;
     padding: 20px 0 20px;
    }
    .contact-area img{
     width: 150px;
     margin: 0 auto;
    }
    .contact-area p{
      margin-top: 20px;
    }
    .copyright{
      background: rgb(46, 46, 46);
    }
    .copyright p{
      color: #b6b4b4;
      font-size: 14px;
      padding: 10px ;
      margin: 0;
    }

    @media (max-width: 767px){
      .contact-area img{
        width: 100px;
      }
      .contact-area h6{
        font-size: 14px;
      }

    } 
    @media (max-width: 450px){
      .contact-area img{
        width: 80px;
      }
      .contact-area h6{
        font-size: 12px;
      }
      .copyright p{
        font-size: 12px;
      }
    }