@font-face
{
   font-family: cm_social;
   src: url(../fonts/cm_social.woff2);
}

main
{
   background: var(--bg-color);
   width: 100%;
   height: 100%;
   padding: 150px 0 50px;
   display: flex;
   justify-content:center;

   .home_info
   {
      display: flex;
      width: 67%;

      .left
      {
         flex: 1;
         margin-top: 50px;

         h3
         {
            font-size: 2em;
            font-weight: bold;
            letter-spacing: 0.5px;
            color: var(--primary-color);
            border-radius: 25px;

            span
            {
               font-size: 2em;
               color: var(--accent-color);
            }
         }

         p
         {
            width: 90%;
            font-size: 19px;
            font-weight: 400;
            line-height: 25px;
            color: var(--primary-color);
            margin-bottom: 15px;
            text-align: justify;
            padding-top: 30px;
         }

         .social
         {
            display: flex;
            align-items: center;
            gap: 15px;
            margin: 25px 0;
            font-family: cm_social;

            a
            {
               color: var(--text-color);
               font-size: 46px;
               text-decoration: none;
               background: transparent;
               width: 65px;
               height: 65px;
               border-radius: 50%;
               display: flex;
               align-items: flex-end;
               justify-content: center;
               transition: 0.4s ease;
               border: 4px solid var(--text-color);

               &:hover
               {
                  color: var(--accent-color);
                  border: 4px solid var(--accent-color);
                  transform: translateY(-7px);
               }
            }
         }
      }

      .right
      {
         flex: 1;

         .logo
         {
            text-align: right;

            img
            {
               width: 450px;
               height: 450px;
               object-fit: cover;
               object-position: top;
               border-radius: 50%;
               border: 3px solid var(--accent-color);
               box-shadow: 0 0 40px var(--accent-color);
               cursor: pointer;
               transition: 0.3s ease;

               &:hover
               {
                  transform: scale(1.05);
                  box-shadow: 0 0 80px var(--accent-color);
               }
            }
         }
      }
   }
}



@media screen and (max-width: 1280px)
{
   main
   {
      padding: 250px 50px;

      .home_info
      {
         .left
         {
            h1
            {
               font-size: 4em;
            }
         }

         .right
         {
            .logo
            {
               img
               {
                  width: 400px;
                  height: 400px;
               }
            }
         }
      }
   }
}


@media screen and (max-width: 1000px)
{
   main
   {
      position: relative;
      padding: 30px 50px;
      height: 100%;

      .home_info
      {
         align-items: center;
         flex-direction: column-reverse;

         .left
         {
            padding-top: 50px;

            h3
            {
               text-align: center;
            }

            p
            {
               width: 100%;
            }

            .social
            {
               justify-content: center;
            }
         }

         .right
         {
            .logo
            {
               margin-top: 25px;

               img
               {
                  width: 375px;
                  height: 375px;
                  box-shadow: 0 0 30px var(--primary-color);

                  &:hover
                  {
                     box-shadow: 0 0 60px var(--primary-color);
                  }
               }
            }
         }
      }
   }
}