body {
    margin: 0;
    font-family: 'Tajawal', sans-serif;
}

.text,
.title {
    direction: rtl;
}

.title {
    color: #B71C1C;
}

.banner {
    padding-bottom: 70px;
    position: relative;
    background: url('./Assets/ihrmeet.jpg');
    height: 530px;
    background-repeat: no-repeat;
    width: 100%;
    background-size: cover;
    color: #ffffff;
    text-align: right;
    background-position: 50% 50%;
}
.banner h1 {
    font-size: 60px;
    margin: 0;
    padding-right: 70px;
    font-weight: 500;
}
.banner p {
    
}
.banner .text {
    float: right;
    text-align: justify;
    width: 413px;
    padding-right: 70px;
}
.banner h1 {
    color: #ffffff;
    text-align: right;
}
.banner h1:first-child {
    font-size: 110px;
    padding-top: 40px;
}
.top a {
    color: #454444;
    text-decoration: none;
    padding-top: 4px;
}
.header {
    background: #ffffff;
    width: 100%;
    z-index: 9;
    padding: 6px 30px 0;
    box-sizing: border-box;
}
.phone {
    width: 20px;
}
.header .top {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.top .flex {
    display: flex;
    align-items: center;
}
.bottom-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.right-section {
    display: flex;
    align-items: center;
}
.laptop {
    background: url('./Assets/laptop.jpg');
    width: 155px;
    height: 100px;
    background-size: cover;
    background-repeat: no-repeat;
}
.right-section a {
    text-decoration: none;
    background: #e20000;
    padding: 8px;
    display: flex;
    align-items: center;
    color: #ffffff;
    border-radius: 4px;
    margin-top: 32px;
    margin-left: 15px;
    transition: background 300ms ease-in-out;
}
.right-section a:hover {
    background: rgba(226, 0, 0, 0.5);
}
.right-section a svg {
    margin-left: 8px;
}
.right-section span {
    padding-top: 5px;
}
.banner #banner-video {
    width: 100%;
}
.phone {
    width: 18px;
}
svg {
    width: 22px;
    margin-right: 8px;
}
.flex:first-child {
    margin-right: 10px;
}
.left-section .logo {
    background: url('./Assets/logo.png');
    width: 163px;
    height: 72px;
    background-size: cover;
}

h1 {
    color: red;
}

.section {
    display: flex;
    width: 1180px;
    margin: 0 auto;
    align-items: center;
    position: relative;
}

.section.section-row {
    flex-direction: row-reverse;
}

.section .right {
    width: 48%;
}

.section .right video {
    max-width: 100%;
}

.section .left {
    width: 48%;
    padding: 0 20px;
}

.section .description {
    width: 55%;
    margin: 0 auto;
    text-align: right;
}

.icon {
    width: 15px;
    /* margin: 0 5px; */
}

.footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 40px;
    background: #333232;
    color: #ffffff;
    clear: both;
    direction: rtl;
}

.social-media {
    /* display: flex; */
    align-items: center;
}

.icon path {
    fill: #ffffff;
}

.copyright {
    font-size: 11px;
}

.content {
    background: rgba(48, 48, 48, 0.07);
}

.section-3 {
    padding-bottom: 50px;
}

.section-3 .right {
    background: url('./Assets/white-board.png');
    width: 55%;
    height: 500px;
    background-size: cover;
    background-repeat: no-repeat;
}

.card {
    background: #fff;
    box-shadow: 0 0 5px rgba(0, 0, 0, .11);
    width: 28%;
    margin: 0 10px;
    /* padding: 20px; */
}

.packages {
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 30px;
    justify-content: center;
    direction: rtl;
}

.section-4 {
    margin-top: -60px;
}

.card .title {
    background: #f7f7f7;
    height: 84px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #B71C1C;
}

.price {
    text-align: center;
    margin-top: 32px;
    font-size: 40px;
    height: 95px;
}

.sub-data {
    font-size: 15px;
}

.details {
    padding: 0 30px 40px;
    margin-top: 24px;
    min-height: 280px;
}

.detail.bold {
    font-weight: 700;
}

.sub-title {
    margin-bottom: 20px;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    height: 75px;
    color: #B71C1C;
}

.details .detail {
    margin-bottom: 8px;
}

.container {
    direction: rtl;
}

input:focus~label,
textarea:focus~label,
input:valid~label,
textarea:valid~label {
    font-size: 0.75em;
    color: #999;
    top: -5px;
    -webkit-transition: all 0.225s ease;
    transition: all 0.225s ease;
}

/* .styled-input {
    float: left;
    width: 293px;
    margin: 1rem 0;
    position: relative;
    border-radius: 4px;
} */

@media only screen and (max-width: 768px) {
    .styled-input {
        width: 100%;
    }
}

.styled-input label {
    color: #999;
    padding: 1.3rem 30px 1rem 30px;
    position: absolute;
    top: 10px;
    right: 0;
    -webkit-transition: all 0.25s ease;
    transition: all 0.25s ease;
    pointer-events: none;
}

/* .styled-input.wide {
    width: 900px;
    max-width: 100%;
} */

input,
textarea {
    padding: 30px;
    border: 0;
    width: 100%;
    font-size: 1rem;
    background-color: #2d2d2d;
    color: white;
    border-radius: 4px;
}

input:focus,
textarea:focus {
    outline: 0;
}

input:focus~span,
textarea:focus~span {
    width: 100%;
    -webkit-transition: all 0.075s ease;
    transition: all 0.075s ease;
}

textarea {
    width: 100%;
    min-height: 15em;
}

.input-container {
    width: 650px;
    max-width: 100%;
    margin: 20px auto 25px auto;
}

.submit-btn {
    /* float: right; */
    padding: 7px 35px;
    border-radius: 60px;
    /* display: inline-block; */
    background-color: #333232;
    color: white;
    font-size: 18px;
    cursor: pointer;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.06), 0 2px 10px 0 rgba(0, 0, 0, 0.07);
    -webkit-transition: all 300ms ease;
    transition: all 300ms ease;
    margin-bottom: 25px;
}

.send-text {
    display: none;
}

.submit-btn:hover {
    transform: translateY(1px);
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.10), 0 1px 1px 0 rgba(0, 0, 0, 0.09);
    background-color: transparent;
    color: #333232;
}

.butt {
    position: absolute;
    bottom: 120px;
    left: 30px;
}

.butt a {
    text-decoration: none;
    color: #333232;
    background: #ffffff;
    padding: 10px 25px;
    border-radius: 20px;
    border: 1px solid transparent;
    transition: all 300ms ease-in-out;
}

.butt a:hover {
    background: transparent;
    border: 1px solid #ffffff;
    color: #ffffff;
}

@media (max-width: 768px) {
    .submit-btn {
        width: 100%;
        float: none;
        text-align: center;
    }
}

input[type=checkbox]+label {
    color: #ccc;
    font-style: italic;
}

input[type=checkbox]:checked+label {
    color: #333232;
    font-style: normal;
}

h1 {
    text-align: center;
    color: #B71C1C;
}

@media(max-width: 1024px) {
    .section {
        width: 100%;
    }
    .section-3 .right {
        height: 345px;
    }
}

@media(max-width: 768px) {
    .section,
    .section.section-row {
        flex-direction: column;
        padding: 0 20px;
        box-sizing: border-box;
    }
    .section .right,
    .section .left {
        width: 100%;
        box-sizing: border-box;
    }
    .section .description {
        width: 100%;
        box-sizing: border-box;
    }
    .input-container,
    .styled-input.wide,
    .packages {
        width: 100%;
        box-sizing: border-box;
    }
    .packages {
        flex-direction: column;
    }
    .card {
        width: 100%;
        margin-bottom: 30px;
    }
    .section-3 {
        margin-top: 50px;
    }
    .section-4 {
        margin-top: 40px;
    }
    .content {
        padding-bottom: 40px;
    }
    .input-container {
        margin: 0;
    }
    input,
    textarea {
        box-sizing: border-box;
    }
    .styled-input {
        padding: 0 20px;
        box-sizing: border-box;
    }
    .styled-input label {
        padding-right: 52px;
    }
    .section {
        margin-bottom: 40px;
    }
    .banner .logo {
        top: 8%;
    }
}

@media(max-width: 720px) {
    .banner h1:first-child {
        font-size: 60px;
    }
    .banner h1 {
        font-size: 33px;
    }
}

@media(max-width: 600px) {
    .section-3 .right {
        height: 250px;
    }
    .banner .logo {
        width: 200px;
        height: 200px;
    }

    .left-section .logo {
        width: 98px;
        height: 45px;
    }

    .laptop {
        display: none;
    }
    .right-section a {
        margin-top: 10px;
    }
    .header {
        padding: 6px 30px 20px;
    }

    .right-section a {
        margin-top: 0;
    }

    .bottom-content {
        margin-top: 18px;
    }
}

@media(max-width: 425px) {
    .banner .logo {
        width: 135px;
        height: 135px;
    }

    .banner h1:first-child {
        font-size: 35px;
    }

    .banner h1 {
        font-size: 20px;
    }

    .banner .text {
        width: 100%;
        padding: 0 15px;
        box-sizing: border-box;
    }
    .banner h1 {
        padding-right: 18px;
    }

    .right-section a {
        font-size: 12px;
    }
    .top a {
        font-size: 13px;
    }
}

@media(max-width: 375px) {
    .banner .logo {
        width: 95px;
        height: 95px;
    }
}