/* Special heading font */
.berkshire {
  font-family: 'Berkshire Swash', cursive;
}



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

   Raleway Font-Faces (local /assets/fonts/)

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



/* Thin (100) */

@font-face {

  font-family: 'Raleway';

  src: url('../assets/fonts/Raleway-Thin.ttf') format('truetype');

  font-weight: 100;

  font-style: normal;

}

@font-face {

  font-family: 'Raleway';

  src: url('../assets/fonts/Raleway-ThinItalic.ttf') format('truetype');

  font-weight: 100;

  font-style: italic;

}



/* ExtraLight (200) */

@font-face {

  font-family: 'Raleway';

  src: url('../assets/fonts/Raleway-ExtraLight.ttf') format('truetype');

  font-weight: 200;

  font-style: normal;

}

@font-face {

  font-family: 'Raleway';

  src: url('../assets/fonts/Raleway-ExtraLightItalic.ttf') format('truetype');

  font-weight: 200;

  font-style: italic;

}



/* Light (300) */

@font-face {

  font-family: 'Raleway';

  src: url('../assets/fonts/Raleway-Light.ttf') format('truetype');

  font-weight: 300;

  font-style: normal;

}

@font-face {

  font-family: 'Raleway';

  src: url('../assets/fonts/Raleway-LightItalic.ttf') format('truetype');

  font-weight: 300;

  font-style: italic;

}



/* Regular (400) */

@font-face {

  font-family: 'Raleway';

  src: url('../assets/fonts/Raleway-Regular.ttf') format('truetype');

  font-weight: 400;

  font-style: normal;

}

@font-face {

  font-family: 'Raleway';

  src: url('../assets/fonts/Raleway-Italic.ttf') format('truetype');

  font-weight: 400;

  font-style: italic;

}



/* Medium (500) */

@font-face {

  font-family: 'Raleway';

  src: url('../assets/fonts/Raleway-Medium.ttf') format('truetype');

  font-weight: 500;

  font-style: normal;

}

@font-face {

  font-family: 'Raleway';

  src: url('../assets/fonts/Raleway-MediumItalic.ttf') format('truetype');

  font-weight: 500;

  font-style: italic;

}



/* SemiBold (600) */

@font-face {

  font-family: 'Raleway';

  src: url('../assets/fonts/Raleway-SemiBold.ttf') format('truetype');

  font-weight: 600;

  font-style: normal;

}

@font-face {

  font-family: 'Raleway';

  src: url('../assets/fonts/Raleway-SemiBoldItalic.ttf') format('truetype');

  font-weight: 600;

  font-style: italic;

}



/* Bold (700) */

@font-face {

  font-family: 'Raleway';

  src: url('../assets/fonts/Raleway-Bold.ttf') format('truetype');

  font-weight: 700;

  font-style: normal;

}

@font-face {

  font-family: 'Raleway';

  src: url('../assets/fonts/Raleway-BoldItalic.ttf') format('truetype');

  font-weight: 700;

  font-style: italic;

}



/* ExtraBold (800) */

@font-face {

  font-family: 'Raleway';

  src: url('../assets/fonts/Raleway-ExtraBold.ttf') format('truetype');

  font-weight: 800;

  font-style: normal;

}

@font-face {

  font-family: 'Raleway';

  src: url('../assets/fonts/Raleway-ExtraBoldItalic.ttf') format('truetype');

  font-weight: 800;

  font-style: italic;

}



/* Black (900) */

@font-face {

  font-family: 'Raleway';

  src: url('../assets/fonts/Raleway-Black.ttf') format('truetype');

  font-weight: 900;

  font-style: normal;

}

@font-face {

  font-family: 'Raleway';

  src: url('../assets/fonts/Raleway-BlackItalic.ttf') format('truetype');

  font-weight: 900;

  font-style: italic;

}





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

   General Styles

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

body, html {

  height: 100%;

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

  margin: 0;

  padding: 0;

}



.cover-container {

  max-width: 42em;

}





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

   Navigation (light style for white background)

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

.nav-masthead .nav-link {

  padding: .25rem 0;

  font-weight: 600;

  color: rgba(0, 0, 0, 0.65);

  background-color: transparent;

  border-bottom: .25rem solid transparent;

}



.nav-masthead .nav-link:hover,

.nav-masthead .nav-link:focus {

  color: #000;

  border-bottom-color: rgba(0, 0, 0, 0.25);

}



.nav-masthead .nav-link + .nav-link {

  margin-left: 1rem;

}



.nav-masthead .active {

  color: #000;

  border-bottom-color: #000;

}





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

   Text Styling

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

.text-shadow {

  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);

}



.animated-gradient-text {

  font-size: 3rem;

  text-align: center;

  background: linear-gradient(90deg, #0088cc, #00c6ff, #0088cc);

  background-size: 300%;

  -webkit-background-clip: text;

  color: transparent;

  animation: gradient-move 3s ease infinite;

}



@keyframes gradient-move {

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

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

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

}



.blinking-text {

  font-size: 1rem;

  text-align: center;

  animation: blink-animation 1s steps(5, start) infinite;

}



@keyframes blink-animation {

  to { visibility: hidden; }

}





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

   Logo Flip

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

.flip-container {

  perspective: 1000px;

  display: inline-block;

}



.flip-effect {

  transition: transform 0.6s;

  transform-style: preserve-3d;

}



.flip-container:hover .flip-effect {

  transform: rotateY(360deg);

}





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

   Button Styles

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

.btn-telegram {

  color: #fff;

  background-color: #0088cc;

  border: none;

  border-radius: 50px;

  padding: 12px 24px;

  font-weight: 600;

  transition: all 0.3s ease;

}



.btn-telegram:hover {

  background-color: #006699;

  color: #fff;

  box-shadow: 0 0 15px rgba(0, 136, 204, 0.7);

}





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

   Button Pulse - Blue Glow

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

.shadow-pulse {

  transition: box-shadow 0.4s ease;

}



.shadow-pulse:hover {

  animation: pulse-shadow 1.5s infinite;

}



@keyframes pulse-shadow {

  0%   { box-shadow: 0 0 10px rgba(0, 136, 204, 0.4); }

  50%  { box-shadow: 0 0 25px rgba(0, 136, 204, 0.9); }

  100% { box-shadow: 0 0 10px rgba(0, 136, 204, 0.4); }

}

/* Social links */
.social-links a {
  color: #374151; /* neutral gray */
  transition: color 0.3s ease, transform 0.2s ease;
}

.social-links a:hover {
  color: #3b82f6;  /* DLK blue hover */
  transform: translateY(-2px);
}

/* Optional brand colors on hover */
.social-links .bi-instagram:hover { color: #E1306C; }
.social-links .bi-youtube:hover { color: #FF0000; }
.social-links .bi-facebook:hover { color: #1877F2; }