*, ::after, ::before {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    font-family: 'Fredoka', sans-serif;
}

body{
    background: #E2E7E7;
    color: #1D2A2E;
}

h1{
    font-size: 56px;
    font-weight: 900;
}

h2{
    font-size: 42px;
    font-weight: 900;
}

.gabriela{
    font-family: 'Gabriela', serif;
}

.design-box1{
    background: #6697A2;
    height: 8px;
    width: 30px;

}

.flex-box{
    display: flex;
    align-items: center;
}

.flex-sb{
    justify-content: space-between;
}

.max-width-640{
    max-width: 640px;
}

.center-all{
    display: flex;
    align-items: center;
    justify-content: center;
}

.center-all-col{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.center{
    text-align: center;
}

.section-width{
    max-width: 1200px;
    margin: 0 auto;
    padding: 12px;
}

.chat-top{
    padding: 12px;
    background-color: #EFF3F5;
}

.chat-top-wrap{
    background-color: #EFF3F5;
}

.lawly-logo img{
    height: 60px;
}

.new-chat-box{
    background: #1D2A2E;
    height: 46px;
    width: 46px;
    border-radius: 8px;
}

.new-chat-icon{
    background: url('../assets/icons/start-new-chat.svg');
    height: 22px;
    width: 22px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

@media(max-width: 440px){
.open-now{
    width: 98% !important;
    margin: 1% !important;
}
}

.open-now{
    width: 400px;
}

.open-now-small{
    width: 300px;
}

.open-now-wrap{
    position: relative;
    padding: 0px; margin: 0;
    display: flex;
    width: 100%;
}

.open-now-input {
    width: 100%;
    font-size: 18px;
    padding: 16px 70px 16px 16px;
    border-radius: 8px;
    border: solid 1px rgba(0,0,0,0.2);
    transition: 0.4s all ease;
    outline: none;
}

.open-now-input:focus, .open-now-small-input:focus{
    border-color: #1D2A2E;
}

.open-now-input::placeholder, .open-now-small-input::placeholder {
    color: rgba(29, 42, 46, 0.6);
}

.open-now-btn{
    position: absolute;
    height: 39.2px;
    right: 8px;
    bottom: 8px;
    top: 8px;
    width: 80px;
    border-radius: 8px;
    background-color: #1D2A2E;
    color: white;
    font-weight: 600;
    outline: none;
    border: none;
    transition: all 0.4s ease;
    cursor: pointer;
}

.open-now-small-input {
    width: 100%;
    font-size: 18px;
    padding: 11px 94px 11px 11px;
    border-radius: 8px;
    border: solid 1px rgba(0,0,0,0.2);
    transition: 0.4s all ease;
    outline: none;
}

.open-now-small-btn{
    position: absolute;
    height: 34px;
    right: 6px;
    bottom: 6px;
    top: 6px;
    width: 80px;
    border-radius: 8px;
    background-color: #1D2A2E;
    color: white;
    font-weight: 600;
    outline: none;
    border: none;
    transition: all 0.4s ease;
    cursor: pointer;
}

.open-now-btn:hover, .open-now-small-btn:hover {
    opacity: 0.8;
}

.opacity-hover{
    transition: 0.4s;
}

.opacity-hover:hover{
    opacity: 0.8;
}

.dot{
    background: #80828A;
    height: 10px;
    width: 10px;
    border-radius: 50%;
}

.hero-content{
    margin-top: 20px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between !important;
    flex-direction: column;
}

.hero-image{
    position: absolute;
    width: 800px;
    height: 800px;
    top: 0px;
    background: linear-gradient(180deg, #E2E7E7 18.41%, rgba(226, 231, 231, 0.00) 64.54%), url('assets/images/hero_image.webp') center bottom, lightgray 50% / cover no-repeat;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: -1;
}

.hero-button{
    margin-top: 700px;
}

.hero-button a{
    text-decoration: none;
}

.hero-button div{
    background: #1D2A2E;
    border-radius: 8px;
    color: white;
    font-weight: 600;
    padding: 16px 64px;
    border: none;
    outline: none;
    cursor: pointer;
    transition: 0.4s all ease;
    font-size: 22px;
}

.pc-content{
    padding-top: 52px;
    z-index: 2;
    text-align: center;
}

.open-now-wrap{
    position: relative;
    padding: 0px; margin: 0;
    display: flex;
}

.spacer{
    margin-top: 100px;
}

.middle-design-wrap{
    padding: 0px !important;
    width: 100%;
}

.md-left{
    width: calc(50% - 8px);
}

.md-right{
    width: calc(50% + 8px);
}

.design-box2-long{
    background: #6697A2;
    height: 22px;
    width: 100%;

}

.design-box2-short{
    background: #6697A2;
    height: 8px;
    width: 100%;

}

.how-it-works-wrap{
    padding: 0px !important;
}

.how-it-works p{
    opacity: 0.8;
}

.hiw-left{
    width: 50%;
    padding: 12px;
}

.hiw-left h2{
    margin-top: 22px;
}

.hiw-left-image{
    text-align: center;
    margin-top: 40px;
}

.hiw-right{
    width: 50%;
}

.hiw-box1{
    background-color: #6697A2;
    position: relative;
    padding-top: 100%;
    width: 100%;
    clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%, 0 18%);
}

.hiw-box1-sub{
    background-color: #1D2A2E;
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%, 0 22%);
}

.hiw-box2{
    background-color: #6697A2;
    position: relative;
    padding-top: 100%;
    width: 100%;
    clip-path: polygon(100% 0, 100% 82%, 82% 100%, 0 100%, 0 0);
}

.hiw-box2-sub{
    background-color: #1D2A2E;
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    clip-path: polygon(100% 0, 100% 78%, 78% 100%, 0 100%, 0 0);
}

.faqs-box3{
    background-color: #6697A2;
    position: relative;
    padding-top: 100%;
    width: 100%;
    clip-path: polygon(82% 1%, 100% 18%, 100% 100%, 0 100%, 0 0);
}

.faqs-box3-sub{
    background-color: #1D2A2E;
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    clip-path: polygon(78% 1%, 100% 22%, 100% 100%, 0 100%, 0 0);
}

.hiw-1{
    position: absolute;
    top: 100px;
    right: 80px;
}

.hiw-1 .hiw-item-icon-img{
    background-image: url('assets/icons/start-new-chat.svg');
}

.hiw-2{
    position: absolute;
    top: 40%;
    left: 40px;
}

.hiw-2 .hiw-item-icon-img{
    background-image: url('assets/icons/start-new-chat.svg');
}

.hiw-3{
    position: absolute;
    bottom: 0px;
    right: 100px;
}

.hiw-3 .hiw-item-icon-img{
    background-image: url('assets/icons/start-new-chat.svg');
}

.hiw-item{
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-bottom: 24px;
    color: white;
}

.hiw-item-icon{
    position: relative;
    height: 62px;
    width: 62px;
    border: solid 2px #6697A2;
    border-radius: 8px;
}

.hiw-item-icon-img{
    height: 24px;
    width: 24px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
}

.hiw-item-icon-num{
    position: absolute;
    bottom: -12px;
    right: -12px;
    height: 26px;
    width: 26px;
    background-color: white;
    color: #6697A2;
    border: solid 2px #6697a2cd;
    border-radius: 50%;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hiw-item h4{
    margin-top: 18px;
}

.hiw-item p{
    margin-top: 4px;
    font-size: 14px;
    opacity: 0.8;
}

.faqs-wrap{
    padding: 0px !important;
}

.faqs p{
    opacity: 0.8;
}

.faqs-left{
    width: 50%;
}

.faqs-left h2{
    margin-top: 22px;
}

.hiw-left-image{
    text-align: center;
    margin-top: 40px;
}

.faqs-right{
    width: 50%;
    padding: 12px;
}

.faqs-left .faqs-box3-sub{
    padding: 80px 34px;
    color: white;
}

.faq-item {
    /* Your styles for each FAQ item */
    margin-bottom: 10px; /* Spacing between items */
    overflow: hidden;
    background-color: white;
    padding: 12px;
    border-radius: 8px;
}
  
.faq-question {
    /* Your styles for the question button */
    width: 100%;
    text-align: left;
    font-size: 24px;
    background: none;
    border: none;
    outline: none;
    cursor: pointer;
    transition: all 0.3s ease; /* Smooth transition for the arrow or button styles */
}

.faq-question-icon-img{
    height: 24px;
    width: 24px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url('assets/icons/down.svg');
    transition: transform 0.3s ease-in-out;
}

.faq-question-icon-img{
    transform: rotate(180deg);
}

.faq-answer {
    /* Your styles for the answer section */
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out; /* Transition effect for smooth opening and closing */
    padding: 0px 10px; /* Adjust padding as needed */
}

.faq-answer.open {
    max-height: 1000px; /* Set to a value higher than what you expect your content to be */
    padding: 10px; /* Adjust padding as needed */
}


.try-lawly .open-now{
    margin-top: 12px;
}

.footer-wrap{
    padding-bottom: 0px !important;
}

.footer-left, .footer-right{
    width: 50%;
}

.footer-left-logo{
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.footer-left-logo h3{
    margin-left: 6px;
    font-size: 28px;
}

.footer-left-text{
    font-size: 14px;
    opacity: 0.8;

}

.footer-right{
    display: flex;
    align-items: center;
    justify-content: flex-end;

}

.copyright{
    margin-top: 28px;
    padding: 18px;
    text-align: center;
    border-top: solid 2px rgba(0,0,0,0.2);
}

.copyright p{
    font-size: 14px;
    opacity: 0.8;
}

@media(max-width: 1120px){
    h1{
        font-size: 48px;
    }

    h2{
        font-size: 36px;
    }
    .center-all{
        flex-direction: column;
    }
    .section-width{
        width: 100%;
        margin: 0;
    }

    .middle-design{
        display: none;
    }

    .hiw-left, .hiw-right{
        width: 100%;
    }

    .faqs-left, .faqs-right{
        width: 100%;
    }

    .hero h1{
        font-size: 38px !important;
    }

    .hero-image{
        top: 100px;
        width: 100%;
        height: 400px;
        background-size: contain;
        background-repeat: no-repeat;
    }

    .hiw-1{
        top: 10px;
        right: 10px;
    }

    .hiw-2{
        top: 15%;
        left: 6px;
    }

    .hiw-3{
        bottom: 0px;
        right: 10px;
    }

    .hero-button{
        margin-top: 320px;
    }

    .footer-left, .footer-right{
        width: 100%;
    }

    .footer-left{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-bottom: 16px;
    }

    .footer-left p{
        text-align: center;
    }

    .footer-right{
        justify-content: center;
    }

    .nav-open-now{
        padding-left: 6px;
    }
}