@use '../utils' as *;

/*----------------------------------------*/
/*  15. information css start
/*----------------------------------------*/
.it-information {
    &-nav-btn {
        & ul {
            & li {
                width: 50%;
                @media #{$xs}{
                    width: 100%;
                }
                & button {
                    font-weight: 600;
                    font-size: 20px;
                    color: #fff;
                    height: 52px;
                    line-height: 52px;
                    text-align: center;
                    padding: 0 25px;
                    width: 100%;
                    font-family: var(--it-ff-heading);
                    background-color: #525252;
                    @media #{$xs}{
                        font-size: 17px;
                    }
                    &.active {
                        color: #fff;
                        background-color: var(--it-theme-1);
                    }
                    &:hover {
                        color: #fff;
                        background-color: var(--it-theme-1);
                    }
                }
            }
        }
    }
    &-wrap {
        padding: 50px 75px;
        @media #{$xl,$md,$lg}{
            padding: 50px 35px;
        }
        @media #{$xs}{
            padding: 50px 20px;
        }
    }
    &-input-box  {
        & input {
            height: 58px;
            line-height: 58px;
            font-weight: 500;
            font-size: 14px;
            background-color: var(--it-common-white);
            @media #{$xl}{
                padding: 0 15px;
            }
            @media #{$lg,$md,$xs}{
                padding: 0 15px;
                height: 45px;
                line-height: 45px;  
                font-size: 12px;     
            }
            &::placeholder {
                font-weight: 400;
                font-size: 15px;
                @media #{$lg}{
                    font-size: 12px;     
                }
            }
        }
    }
    &-left {
        margin-right: 59px;
        @media #{$lg,$md,$xs}{
            margin-right: 0;  
        }
        & form {
            & > span {
                font-weight: 600;
                font-size: 20px;
                font-family: var(--it-ff-heading);
                color: var(--it-common-black);
            }
        }
    }
    &-check-box {
        & ul {
            display: flex;
            justify-content: space-between;
            @media #{$lg,$md}{
                flex-wrap: wrap;  
            }
            @media #{$xs}{
                flex-wrap: wrap;  
                justify-content: start;
            }
            & li {
                list-style-type: none;
                display: inline-block; 
                &:not(:last-child){
                    @media #{$xs}{
                        margin-right: 12px;
                        margin-bottom: 5px;
                    }  
                }             
                &.form-check {
                    & label {
                        font-weight: 400;
                        font-size: 15px;
                    }
                }
                & .form-check-input[type="checkbox"] {
                    box-shadow: none;
                    border-radius: 0;
                    width: 15px;
                    height: 15px;
                    padding: 0;
                    margin-top: 2px;
                    margin-right: 0;
                    border: 0;
                    position: relative;
                    background-color: #ffffff;
                    box-shadow: 0px 4px 25px 0px rgba(0, 0, 0, 0.1);
                    &::after {
                        content: "";
                        position: absolute;
                        top: 3.2px;
                        left: 0.6px;
                        right: 0;
                        height: 9px;
                        width: 9px;
                        margin: 0 auto;
                        text-align: center;
                        border-radius: 1px;
                        background-color: var(--it-theme-1);
                        opacity: 0;
                    }
                }
                & .form-check-input:checked {                    
                    &::after {
                        opacity: 1;
                    }
                }
            }
        }
    }
    &-title {
        font-weight: 600;
        font-size: 35px;
        line-height: 1.14;
        color: var(--it-common-white);
        @media #{$xl}{
            font-size: 30px; 
        }
        @media #{$lg}{
            font-size: 28px; 
        }
        @media #{$xs}{
            font-size: 25px; 
        }
    }
    &-right {
        padding: 50px 30px;
        padding-top: 45px;
        background-repeat: no-repeat;
        background-size: cover;
        margin-left: -15px;
        @media #{$xl}{
            margin-left: -40px;  
        }
        @media #{$lg}{
            margin-left: 20px;  
        }
        @media #{$md,$xs}{
            margin-left: 0; 
            margin-top: 50px; 
        }
        & p {
            font-weight: 600;
            font-size: 14px;
            line-height: 1.71;
            color: #fff; 
            @media #{$lg,$md,$xs}{
                & br {
                   display: none;
                }
            }
        }
    }
    &-bg {
        position: relative;
        &::after {
            position: absolute;
            content: '';
            top: 0;
            left: 0;
            width: 100%;
            height: 53%;
            z-index: -1;
            background-color: var(--it-common-black);
        }
    }
    &-shape-1 {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        opacity: .3;
    }
    &-style-2 {
        & .it-information-left form > span {
            color: var(--it-common-white);
        }
        & .it-information-check-box ul li {
            color: var(--it-common-white);
        }
        & .it-information-check-box ul li .form-check-input[type="checkbox"] {
            border: 0.5px solid #fff;
            border-radius: 5px;
            &::after {
                top: 2px;
                border-radius: 50%;
            }
        }
    }
}
.it-information-left {
    & form {
        & .row.gx-20{
            @media #{$lg}{
                --bs-gutter-x: 10px;
            }
        }        
    }
}