@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Raleway: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&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,500;0,600;0,700;0,800;0,900;1,500;1,600;1,700;1,800;1,900&display=swap');
.blog-details {
            height: auto;
            margin-top: 100px;
            padding: 100px 200px;
            margin-bottom: 40px;
            background: linear-gradient(119.92deg, #53B7FF 14.15%, #F0F9FF 4.18%);
            border-radius: 15px;
            box-shadow: 9px 10px 40px rgba(0, 0, 0, 0.55);



        }

        .blog-details .date {
            font-weight: 400;
            color: rgba(0, 0, 0, 0.55);

        }
        .para1{
            color: rgba(0, 0, 0, 0.55);
        }
        .time{
            display: block;
        }
        .time h6,.name h5,.details h5{
            color: black;
        }

        .blog-details .date span {
            color: #1267a0;
            padding-left: 15px;
            margin-left: 15px;
            border-left: 2px solid;
            font-weight: 500;
            letter-spacing: 1px;
        }

        .blog-details h2 {
            font-size: 34px;
            font-weight: 500px;
            font-family: 'Poppins', sans-serif;
            font-style: normal;
            line-height: 80px;
            color: black;


        }

        .details {
            margin: 30px 0px;
        }

        .circle {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            margin-right: 15px;
            background-image: url(assets/images/user8-128x128.jpg);
            background-size: contain;
            background-repeat: no-repeat;
            border: 1px solid black;
        }

        @media (min-width: 320px) and (max-width: 480px) {
            .blog-details {
                height: auto;
                margin-top: 100px;
                width: 320px;
                padding: 40px 20px;
                margin-bottom: 40px;
            }

            .blog-details h2 {
                font-size: 28px;
                line-height: 35px;
                margin: 30px 0px;
            }
            .time{
                margin:10px;
                margin-top: 20px;
                margin-bottom: 0px;
            }
            

        }
         @media (min-width: 768px) and (max-width: 1024px) {
             
             .blog-details {
                height: auto;
                margin-top: 100px;
                width: 710px;
                padding: 50px 50px;
                margin-bottom: 40px;
            }
             .blog-details h2 {
                font-size: 38px;
                line-height: 40px;
                margin: 30px 0px;
            }
             .none{
                 display: none;
             }
             .time{
                 margin-left: 40px;
             }
             
        }
         @media (min-width: 1024px) and (max-width: 1026px) {
             .blog-details {
                height: auto;
                margin-top: 120px;
                width: 950px;
                padding: 50px 100px;
                margin-bottom: 50px;
            }
        }
         @media (min-width: 481px) and (max-width: 767px) {
            .blog-details {
                height: auto;
                margin-top: 100px;
                width: 500px;
                padding: 30px 40px;
                margin-bottom: 50px;
            }
              .blog-details h2 {
                font-size: 34px;
                line-height: 40px;
                margin: 30px 0px;
            }
             .time{
                margin:10px;
                margin-top: 20px;
                margin-bottom: 0px;
            }
        }