@import url('https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&family=Cairo:slnt,wght@1,200..1000&display=swap');
/* general */
body {
    font-family: "Cairo", sans-serif;
    height: 100vh;
}


/*  navbar */
.navbar {
    background-color: white;
}

nav .nav-item > .nav-link > i {
    color: #246ED0;
    font-size: 28px;
}

.social-media-links {
    min-width: 164px;
}


.fs-7 {
    font-size:0.75rem;
}

.loader {
    border-radius: 50%;
    border-top: 9px solid #fff;
    border-bottom: 9px solid #fff;
    width: 60px;
    height: 60px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
    margin: auto;
}

.main-loader {
    position: fixed;
    z-index: 1085;
    width: 100%;
    background: rgba(0, 0, 0, 0.8);
    height: 100vh;
}

    .main-loader > p {
        position: absolute;
        top: calc(50% + 50px);
        color: #fff;
    }



@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* hero section */
.hero-section {
    min-height: 800px;
}

.inner-hero-section {
    background-image: url(../assets/images/hero-bg.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.bottom-hero-section {
    background: #005F35;
    font-size: 20px;
}

.bottom-hero-section .container {
    max-width: 938px;
    line-height: 37px; /* 185% */
    padding-block: 18px;
}

.heading {
    padding: 42px 54px;
    border-radius: 16px;
    background: rgba(0, 95, 53, 0.6);
    width: 95% !important;
    font-size: 52px !important;
}



/* props section */
.props-section {
    padding-top: 70px;
}

.props-intro {
    padding-bottom: 60px;
}

.props-intro-header {
    color: #005F35;
    font-size: 36px !important;
}

.props-intro-text {
    margin-top: 40px;
    font-size: 20px;
}

.prop ul {
    list-style: none;
    padding-right: 20px;
}

    .prop ul li {
        list-style-image: url('../assets/images/list-icon.svg');
        margin-bottom: 0.5em;
    }

.prop.text-rect {
    padding-inline-start: 40px;
}

    .prop.text-rect h3 {
        color: #4A4A4A;
        font-size: 32px;
        line-height: 50px;
    }

    .prop.text-rect ul {
        color: #2E1E52;
        font-size: 20px;
        line-height: 30px;
    }


/* features section */
.features-section {
    padding-block: 55px;
    background-color: #F2F2F2;
}

    .features-section h3 {
        color: #005F35;
        font-size: 40px;
        line-height: 56px;
        margin-bottom: 34px;
    }

.feature-cards {
    width: 95%;
}

.ps-cutome {
    padding-inline-start: 40px;
}

.pe-cutome {
    padding-inline-end: 40px;
}

.feature-cards .feature-card {
    border-radius: 10px;
    padding: 36px;
    height: 100%;
    width: 100%;
}

    .feature-cards .feature-card p {
        color: #4A4A4A;
        text-align: center;
        font-size: 32px;
        line-height: 57px;
        font-weight: 700;
    }


/* screenshots section */
.screen-shots-section {
    display: grid;
    grid-template-columns: auto auto auto auto;
    gap: 10px;
    padding-block: 83px;
}

.screen1 {
    grid-column: 1 / span 2;
}

.screen2 {
    grid-column: 3 / span 2;
    grid-row: 1 / span 2;
}

.screen3 {
    grid-column: 1 / span 2;
    grid-row: 2 / span 2;
}

.screen4 {
    grid-column: 3;
    grid-row: 3;
}

.screen5 {
    grid-column: 4;
    grid-row: 3;
}


/* form section */
.form-section {
    background: #EAEAEA;
    padding-block: 75px
}

.form-container {
    width: 95%;
    height: auto;
    max-width: 1080px;
    background-color: #ffffff;
    padding: 20px;
    border-radius: 20px;
}

.inner-form {
    display: flex;
    padding: 40px;
    flex-direction: column;
    align-items: flex-start;
}

    .inner-form form {
        display: flex;
        padding: 40px;
        flex-direction: column;
        align-items: flex-start;
    }

.form-side-img > img {
    object-fit: cover;
    object-position: center;
    border-radius: 12px;
    width: 100%;
    height: 100%;
}

.inner-form h4 {
    color: #005F35;
    font-size: 24px;
    font-weight: 700;
    line-height: 150.085%;
    letter-spacing: -0.48px;
}

.inner-form .form-control {
    padding: 12px 14px;
    border-radius: 5px;
    border: 1px solid #ACACAC;
}

    .inner-form .form-control::placeholder {
        color: #BDBDBD;
        font-size: 15px;
    }

.inner-form .btn {
    border-radius: 5px;
    background: #005F35;
    padding: 12px 10px;
}

/* footer */
footer {
    background: #1D1160;
    padding-bottom: 0;
}
    footer .border-bottom {
        padding-block: 58px;
        padding-inline: 58px;
    }

    footer .nav-item > .nav-link > i {
        font-size: 28px;
    }

    footer .navbar-nav {
        width: 140px;
    }

    footer h4 {
        font-size: 1.68rem;
    }

/* break points style */

/* small */
@media (min-width: 576px) {
}

/* mediam */
@media (min-width: 768px) {
    .heading {
        width: 75% !important;
    }
}

/* large */
@media (min-width: 992px) {

    .heading {
        width: 50% !important;
    }

    .feature-cards {
        width: 85%;
    }

    .feature-card {
        min-width: 408px;
        min-height: 246px;
    }

    .prop.text-rect {
        padding-inline-start: 107px;
    }
}


/* extra large */
@media (min-width: 1200px) {

    .feature-cards {
        width: 75%;
    }

    .prop.text-rect h3 {
        font-size: 36px;
        line-height: 56px;
    }

    .prop.text-rect ul {
        font-size: 24px;
        line-height: 37px;
    }
}

@media (min-width: 1350px) {
    .feature-cards {
        width: 59.44%;
    }
}


/* icons */
.bi-telegram {
    display: inline-block;
    width: 1em;
    height: 1em;
    background: no-repeat center / contain;
    vertical-align: middle;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 18' fill='white'><path fill-rule='evenodd' clip-rule='evenodd' d='M16.8261 16.2902L16.8268 16.2885L16.8442 16.245L19.843 1.12592V1.07682C19.843 0.700115 19.7038 0.371256 19.4009 0.173996C19.1358 0.00133431 18.831 -0.0109622 18.6173 0.00525841C18.3913 0.0224132 18.1782 0.0788287 18.0306 0.125789C17.9547 0.149949 17.8912 0.173227 17.8458 0.190834C17.823 0.19967 17.8045 0.207169 17.791 0.212755L17.7779 0.218313L1.05804 6.77725L1.05343 6.7789C1.0444 6.78219 1.03246 6.78664 1.01804 6.79225C0.989284 6.80345 0.950144 6.81946 0.904164 6.8403C0.813883 6.88122 0.689147 6.94436 0.562645 7.03099C0.347792 7.17812 -0.0613223 7.52645 0.00775988 8.07867C0.0649805 8.53608 0.380284 8.82658 0.592852 8.97698C0.706801 9.05761 0.815814 9.11575 0.895642 9.15375C0.93609 9.17301 0.970448 9.18776 0.996035 9.19818C1.00886 9.2034 1.01959 9.20758 1.02789 9.21073L1.03851 9.21469L1.04531 9.21721L3.97055 10.202C3.96067 10.3856 3.97888 10.5727 4.02755 10.7573L5.49283 16.3157C5.66657 16.9748 6.2628 17.4339 6.94437 17.4334C7.5553 17.4329 8.09712 17.0633 8.32731 16.5119L10.615 14.0658L14.544 17.0781L14.5998 17.1025C14.9568 17.2582 15.2903 17.3076 15.5952 17.2659C15.8997 17.2243 16.1417 17.0966 16.3235 16.9512C16.5023 16.8081 16.6249 16.6466 16.702 16.525C16.7411 16.4633 16.7704 16.409 16.7906 16.3681C16.8008 16.3476 16.8088 16.3302 16.8148 16.3167L16.8223 16.2993L16.825 16.2928L16.8261 16.2902ZM5.47795 10.375C5.44465 10.2486 5.49693 10.1153 5.60721 10.0452L15.5292 3.74432C15.5292 3.74432 16.1128 3.39002 16.092 3.74432C16.092 3.74432 16.1961 3.80689 15.8834 4.09861C15.5868 4.37569 8.81171 10.9167 8.12617 11.5786C8.0866 11.6168 8.06298 11.6607 8.04904 11.7139L6.94323 15.9334L5.47795 10.375Z'/></svg>");
}

.bi-location-custom {
    display: inline-block;
    width: 1em;
    height: 1em;
    background: no-repeat center / contain;
    vertical-align: middle;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 20' fill='white'><path d='M5.15388 8.42964C5.15388 6.64957 6.65197 5.20654 8.49997 5.20654C10.348 5.20654 11.8461 6.64957 11.8461 8.42964C11.8461 10.2097 10.348 11.6527 8.49997 11.6527C6.65197 11.6527 5.15388 10.2097 5.15388 8.42964Z' fill='white'/><path fill-rule='evenodd' clip-rule='evenodd' d='M0.0302715 7.31632C0.384071 3.18189 3.97088 0 8.27765 0H8.72236C13.0291 0 16.6159 3.18189 16.9697 7.31632C17.1602 9.54234 16.4464 11.7527 14.9786 13.4818L10.0438 19.2951C9.24589 20.235 7.75411 20.235 6.95622 19.2951L2.02144 13.4818C0.553626 11.7527 -0.160217 9.54234 0.0302715 7.31632ZM8.49997 3.71896C5.79905 3.71896 3.60952 5.828 3.60952 8.42964C3.60952 11.0313 5.79905 13.1403 8.49997 13.1403C11.2009 13.1403 13.3904 11.0313 13.3904 8.42964C13.3904 5.828 11.2009 3.71896 8.49997 3.71896Z' fill='white'/></svg>");
}
