/*===================================================================================

 * MS Framework (MyStyle) (https://developer.acrobyte.in/MyStyle/v5)
 * Copyright 2018-2025 Acrobyte Inc..
 * Licensed under AI (https://acrobyte.in)                           //\        //\                 || ||     
                                                                    || \\      // ||             ||       ||
                                                                    ||  \\    //  ||          ||            ||
   Creater: Sarthak Sharma                                          ||   \\  //   ||          || 
   Email: sarthaksharma750@gmail.com                                ||    \\//    ||             ||
   Owner: Acrobyte incorporate Pvt, Lmt, Co.                        ||     \/     ||                || || 
                                                                    ||            ||                      ||  
                                                                    ||            ||                         || 
========= Short Words to remember ========                          ||            ||           ||            ||
                                                                    ||            ||              ||       ||
cont = container                                                    ||            ||                 || ||
fx = fixed
btm = bottom
br = border
txt = text (in color of text)
lt = light
sm = small
md = medium
lg = large

===========================================

*/

@import url('https://fonts.googleapis.com/css2?family=Afacad+Flux:wght@100..1000&family=Allura&family=Bebas+Neue&family=Boldonse&family=Carter+One&family=Caveat:wght@400..700&family=Comfortaa:wght@300..700&family=Cookie&family=Darumadrop+One&family=Finger+Paint&family=Kablammo&family=Lilita+One&family=Lobster&family=Macondo&family=Orbitron:wght@400..900&family=Rubik+Vinyl&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
@import 'grid.css';
@import 'height.css';
@import 'width.css';
@import 'display.css';
@import 'containers.css';
@import 'tables.css';
@import 'borders.css';
@import 'colors.css';
@import 'bg.css';
@import 'shapes.css';
@import 'fonts.css';
@import 'margins.css';
@import 'paddings.css';
@import 'buttons.css';
@import 'shadows.css';
@import 'hovers.css';
@import 'animations.css';
@import 'forms.css';
@import 'nav.css';

*{
    margin: 0px;
    padding: 0px;
    transition: 0.10s ease;
}
body{
    margin: 0px;
    padding: 0px;
    transition: 0.4s ease;
    overflow-x: hidden;
    overflow-y: scroll
}

a{
    text-decoration: none;
    color: inherit;
}

.pc{
    display: none;
}
.mobile{
    display: inline-block;
}

.tablet{
    display: none;
}

.theme-toggle-btn {
    display: inline-block;
    justify-content: center;
    align-items: center;
  }
  
  .theme-toggle {
    display: none;
  }

  .center{
    text-align: center;
    align-items: center;
    justify-content: center;
  }
  .left{
    text-align: left;
    align-items: left;
    justify-content: left;
  }

  .pointer{
    cursor: pointer;
  }

  
  .toggle-label {
    width: 60px;
    height: 30px;
    border-radius: 30px;
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 6px;
    box-sizing: border-box;
    transition: background-color 0.3s;
    color: black;
  }
  
  .toggle-label .toggle-icon {
    font-size: 16px;
    z-index: 2;
  }
  
  .toggle-slider {
    position: absolute;
    top: 3px;
    padding: 1px;
    left: 3px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    transition: left 0.3s ease;
    z-index: 1;
  }
  
  /* When toggle is checked, move the slider to the right */
  .theme-toggle:checked + .toggle-label .toggle-slider {
    left: 33px;
  }
  
  /* Optional: dark mode background */
  [data-theme="dark"] .toggle-label {
    color: white;
  }
  

@media screen and (min-width: 1000px) {
    .tablet{
        display: inline-block;
    }
    .mobile{
        display: none;
    }
    .pc{
        display: none;
    }
    
}

@media screen and (min-width: 998px) {
    .pc{
        display: inline-block;
    }
    .mobile{
        display: none;
    }
    
}