/*
Theme Name: thegrindcode
Description: A brief description of your theme.
Version: 1.0 
*/ 
body {background-color: #f7feff !important;font-family: Arial, sans-serif !important;}
a{display: inline-block; text-decoration: none;}
/* Navbar banner */
.top-banner{width: 900px;margin: auto; margin-bottom: 40px; }
.top-banner img { width: 100%;height: auto; }
.main-content .sub-heading{ font-weight: 900; font-size: 40px; color: #106093;}
/* Social icons */
.social-icons a {display: inline-flex;align-items: center;justify-content: center; width: 39px;height: 38px;border-radius: 50%;  color: #fff;margin-right: 5px;text-decoration: none;font-size: 14px; }
/* Heading */
.main-title { font-family: 'Anton', sans-serif; font-size: 100px; font-weight: 900; letter-spacing: 5px; text-transform: uppercase; line-height: 1; color: #002A54;}
.center-img{margin-bottom: 10px;}
.sub-title {font-size: 34px;font-weight: 700;margin-top: -10px;color: #106093; letter-spacing: 5px;}
.heading-box{align-items: flex-start;}
/* Podcast buttons */
.podcast-btn img {max-width: 230px; border-radius: 10px;}
/* Big image */
.hero-image img {width: 100%;max-width: 900px;display: block;margin: auto; }
/* Footer */
footer { background: #222; color: #ccc; padding: 35px 0; font-size: 14px; }
footer a {color: #ccc;text-decoration: none; font-size:16px;}
footer a:hover { text-decoration: underline; }
.heading-box .subscribe-btn{border: 1px solid #000; border-radius: 30px; color: #000; }
.heading-box .subscribe-btn:hover{background-color: #000; color: #fff; }
/* .other-links .podcast-btn:hover{transform: scale(1.05); transition: 0.3s ease-in-out;} */
.other-links .podcast-btn {transition: transform 0.3s ease-in-out;}
.other-links .podcast-btn:hover {transform: scale(1.08);} 
.social-icons .instagram a::before {background: radial-gradient(circle farthest-corner at 35% 90%, #fec564, transparent 50%), 
  radial-gradient(circle farthest-corner at 0 140%, #fec564, transparent 50%), 
  radial-gradient(ellipse farthest-corner at 0 -25%, #5258cf, transparent 50%), 
  radial-gradient(ellipse farthest-corner at 20% -50%, #5258cf, transparent 50%), 
  radial-gradient(ellipse farthest-corner at 100% 0, #893dc2, transparent 50%), 
  radial-gradient(ellipse farthest-corner at 60% -20%, #893dc2, transparent 50%), 
  radial-gradient(ellipse farthest-corner at 100% 100%, #d9317a, transparent), 
  linear-gradient(#6559ca, #bc318f 30%, #e33f5f 50%, #f77638 70%, #fec66d 100%) !important;
 }
.social-icons .youtube a::before {background: linear-gradient(45deg, #ff4b2b, #ff0000) !important;}
.social-icons .linkedin a::before {background: linear-gradient(45deg, #0077B5, #00A0DC) !important;}
.social-icons .linktree a::before {background: -webkit-linear-gradient(45deg, #39E09B, #1DB954) !important;}

.zoom-style {
    & .social-icons {
        & .instagram a {
            &:hover i{background: radial-gradient(circle farthest-corner at 35% 90%, #fec564, transparent 50%), 
              radial-gradient(circle farthest-corner at 0 140%, #fec564, transparent 50%), 
              radial-gradient(ellipse farthest-corner at 0 -25%, #5258cf, transparent 50%), 
              radial-gradient(ellipse farthest-corner at 20% -50%, #5258cf, transparent 50%), 
              radial-gradient(ellipse farthest-corner at 100% 0, #893dc2, transparent 50%), 
              radial-gradient(ellipse farthest-corner at 60% -20%, #893dc2, transparent 50%), 
              radial-gradient(ellipse farthest-corner at 100% 100%, #d9317a, transparent), 
              linear-gradient(#6559ca, #bc318f 30%, #e33f5f 50%, #f77638 70%, #fec66d 100%) !important;
                -webkit-background-clip: text !important;
                -webkit-text-fill-color: transparent !important;
                transition: all 0.25s ease-in;}}}}
.zoom-style {
    & .social-icons {
        & .youtube a {
            &:hover i{
              background: linear-gradient(45deg, #ff4b2b, #ff0000) !important;
                -webkit-background-clip: text !important;
                -webkit-text-fill-color: transparent !important;
                transition: all 0.25s ease-in;
            }}}}
.zoom-style {
    & .social-icons {
        & .linkedin a {
            &:hover i{background: linear-gradient(45deg, #0077B5, #00A0DC) !important;
                -webkit-background-clip: text !important;
                -webkit-text-fill-color: transparent !important;
                transition: all 0.25s ease-in;}}}}
.zoom-style {
    & .social-icons {
        & .linktree a {
            &:hover i{background: -webkit-linear-gradient(45deg, #39E09B, #1DB954) !important;
                -webkit-background-clip: text !important;
                -webkit-text-fill-color: transparent !important;
                transition: all 0.25s ease-in;}}}}


.social-container {
  display: flex;
  flex-flow: column;
  margin: 0 auto; 
  text-align: center;
  border-bottom: 1px solid #fff;
  &:last-child {
    border-bottom: 0;
  }
  h2 {
    margin-bottom: 30px;
    font-size: 24px;
    font-weight: 500;
  }
  .copyright {
    margin-top: 15px;
    a {
      text-decoration: none;
      color: #002A54;
      transition: 0.25s;
      letter-spacing: 0;
      &:hover {
        color: #002A54;
        letter-spacing: 1px;
      }
    }
  }
}

/* // Style Zoom In Out */
.zoom-style {
  .social-icons {
    list-style: none;
    margin: 0;
    padding: 0;
    li {
      position: relative;
      display: inline-block;
      margin: 4px;
    }
    i {
      color: #fff;
            font-size: 20px;
            line-height: normal;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
            z-index: 10;
            display: flex;
            align-items: center;
            justify-content: center;

    }
    a {
      display: inline-block;
      position: relative;
      &:before {
        content: " ";
        display: block;
        width: 40px;
        height: 40px;
        border-radius: 100%;
        background: linear-gradient(45deg, #002A54, #002A54);
        transition: all 0.25s ease-out;
      }
      &:hover:before {
        transform: scale(0);
        -ms-transform: scale(0);
        -webkit-transform: scale(0);
        transition: all 0.25s ease-in;
      }
      &:hover i {
       color: #002A54;
                transition: all 0.25s ease-in;
                transform: scale(1.5);
      }
    }
  }
}



/* // Glass effect css Glassmorphism Effect */
.glassmorphism-style {
  .social-icons {
    list-style: none;
    margin: 0;
    padding: 0;
    li {
      position: relative;
      display: inline-block;
      margin: 15px;
      a {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 50px;
        height: 50px;
        cursor: pointer;
        text-decoration: none;
        transition: 0.25s;
        perspective: 800px;
        &:hover {
          .ic-front {
            transform: translateZ(80px) translateY(-5px) rotateX(15deg) rotateY(15deg);
          }
          .ic-back {
            transform: translateZ(20px) rotateZ(15deg) rotateX(-20deg) rotateY(-20deg);
          }
        }
        i {
          position: absolute;
          left: 50%;
          top: 50%;
          font-size: 30px;
          color: #fff;
          transform: translate(-50%, -50%);
        }
        &.ic-facebook {
          .ic-back {
            background-color: #006FFF;
          }
        }
        &.ic-instagram {
          .ic-back {
            background-color: #ff5f40;
          }
        }
        &.ic-twitter {
          .ic-back {
            background-color: #00C6FB;
          }
        }
        &.ic-tiktok {
          .ic-back {
            background: linear-gradient(130deg, #fe2c55 0%, black 50%, #25f4ee 100%);
          }
        }
        &.ic-youtube {
          .ic-back {
            background-color: #ff0000;
          }
        }
      }
    }
  }
  .ic-back {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: inherit;
    height: inherit;
    border-radius: 15px;
    transition: 0.25s;
    transform-style: preserve-3d;
    transform-origin: bottom right;
    transform: rotateZ(15deg);
    will-change: transform;
    box-shadow: 16px 0 40px #e4e4e4;
  }
  .ic-front {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: inherit;
    height: inherit;
    border-radius: 15px;
    background-color: #ffffff33;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    transition: 0.25s;
    transform-style: preserve-3d;
    transform-origin: top left;
    overflow: hidden;
    box-shadow: 0 0 0 1px hsla(0,0%,100%,0.3) inset;
  }
}
/* Responsive Styles */
@media (max-width:767px){ 
  .top-banner{width:100%}
  .heading-box{align-items: center; justify-content: center;}
  .main-title{margin-bottom: 20px; }
  .sub-title {letter-spacing: 2px; font-size: 28px;}
  footer{align-items: center; justify-content: center; text-align: center; padding: 20px 0;}
  footer a{font-size: 12px;}
  footer .container span{font-size: 12px;}
  footer .container {flex-direction: column;} 
}