import { styled } from "styled-components";
import { device } from "@/app/components/common/Devices";
import { Colors, Gradient } from "@/app/components/common/variable";

export const NeedHelpSection = styled.section`
   .needHelpsection{
        padding:60px 90px;
        background: ${Gradient.DarkPinkGradient};
        position:relative;
        &::before{
            content:'';
            position:absolute;
            width:100%;
            height:100%;
            left:0;
            top:0;
            background-image:url('/candidate/assets/images/helpNeedvector.webp');
        }
        & *{
            position:relative;
        }
        h3{
            font-size:38px;
            line-height:1.2;
            font-weight:600;
            color: ${Colors.white};
            margin-bottom:0;
            @media ${device.laptop}{
                font-size:36px;
            }
            @media ${device.laptopS}{
                font-size:32px;
            }
            @media ${device.tablet}{
                
            }
            @media ${device.mobile}{
                font-size:28px;
            }
            @media ${device.mobileS}{
                font-size:27px;
            }
        }
        p{
            margin:40px 0;
            color:${Colors.white};
            line-height:1.9;
            text-align: center;
            @media ${device.laptop}{
                margin:30px 0;
            }
            @media ${device.mobile}{
                margin:20px 0;
            }
        }
        @media ${device.laptop}{
            padding:50px 70px;
        }
        @media ${device.laptopS}{
            padding:40px 50px;
        }
        @media ${device.mobile}{
            padding:30px 40px;
            border-radius:30px;
        }
   }
`;