/* Setting up basics  */
:root
{
    /* the colors  */
    --primary-color:#c98a45;
    --secondary-color:#4c3e21;
    --silver:#b2b1b6;

}

*
{
    box-sizing: border-box;
}

/* reseting some bootstrap declaration */
.fs-1 {
    font-size: calc(1.375rem + 1vw)!important;
}


/* the scrollbar  */
::-webkit-scrollbar
{
    width: 1rem;
    /* height: 90vh; */
}

::-webkit-scrollbar-track
{
    background-color: white;
}

::-webkit-scrollbar-thumb
{
    background-color: var(--primary-color);
}

.progress-bar
{
    display: none !important;
}

a
{
    text-decoration: none;
    color: inherit;
}
ul
{
    list-style: none;
}

.pr-color
{
   color:#c98a45;
}

.sc-color
{
    color:#4c3e21;
}

html
{
    /* setting up the the font size root as a main measure unit */
    font-size: 62.5%;
    scrollbar-color: var(--primary-color) white;
    /* scrollbar-width: .5rem !important; */
}

body
{
    direction: rtl;
    font-family: cairo;
    margin: 0;
    padding: 0;
    width: 100%;

}

.navbar
{
    z-index: 999;
    position: fixed;
    top: 0;
    width: 100%;
    padding: 0 !important;
    height: 10rem;
    box-shadow: .5rem .5rem 2rem rgba(0, 0, 0, .3);
}

.bg-body-tertiary
{
    background-color: rgba(255, 255, 255,) !important;
}
.navbar-brand .logo
{
    max-height: 9rem;
    max-width: fit-content;
    margin-left: 2rem;
}

.navbar-toggler
{
    padding: var(--bs-navbar-toggler-padding-y) var(--bs-navbar-toggler-padding-x);
    font-size: 2rem;
    line-height: 1;
    color: white !important;
    background-color: transparent;
    border: none;
    border-radius: var(--bs-navbar-toggler-border-radius);
    transition: var(--bs-navbar-toggler-transition);
}

.navbar-toggler-icon {
    display: inline-block;
    line-height: 4rem;
    font-size: 3rem;
    vertical-align: middle;
    background-image:none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    color: white !important;
}

.navbar-toggler:focus {
    box-shadow: none;     
}

.navbar-nav
{
    width: 100%;
}

.nav-item
{
    margin: 0 1rem;
}

.nav-link.active
{
    color: white !important;
    font-weight: bold;
    background-color: var(--primary-color);
    transition: all .2s ease-in-out;
}

.nav-link
{
    font-size: 2rem;
    height: 10rem;
    width: 17rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s ease-in-out;
}

.nav-item .contact-us
{
    justify-self: flex-start;
}

.carousel
{
    margin-top: 10rem;
    width: 100%;
}

.carousel-item img
{
    height: 80vh;
    object-fit: cover;
    filter: brightness(0.8) blur(2px);
}

.carousel-caption
{
    position: absolute;
    right: 15%;
    bottom: 35vh;
    left: 15%; 
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    color: white !important;
    text-align: center;
    font-size: 3.5rem;
    font-weight: 800;
}

.carousel-caption .h3 .p
{
    background-color: white !important;
}

.carsouel-contact
{
    position: relative;
    top: 52vh;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}

.carousel-indicators
{
    direction: ltr;
}

.carousel-indicators [data-bs-target]
{
    height: .5rem;
    width: 5rem;
}

.carousel-indicators .active
{
    background-color: var(--primary-color) !important;
    background-color: #fab105 !important;
}

.company-whatsapp
{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    border-radius: 8rem;
    font-size: 2rem;
    background-color: var(--primary-color);
    background-color: #25d366;
    background-color: #22c05c;

    color: white;
    text-decoration: none;
    padding: 1rem 4rem;
    box-shadow: .5rem .8rem 3rem rgba(000, 000, 000, .3);
}

.company-whatsapp:hover
{
    background-color: #25d366;
    color: white;
}

.company-messenger
{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    border-radius: 8rem;
    font-size: 1.5rem;
    background-color: var(--primary-color);
    background-color: #006AFF;
    background-color: #0055cd;

    color: white;
    text-decoration: none;
    padding: 1rem 4rem;
    margin-top: 2rem;
    box-shadow: .5rem .8rem 3rem rgba(000, 000, 000, .3);
}

.company-messenger:hover
{
    background-color: #006AFF;
    color: white;
}


.company-insta
{
    margin-top: 2rem;
    font-size: 1.6rem;
    color: white;
    font-weight: lighter;
}

.insta-icon
{
    margin-right: .5rem;
}

.contacts-icon
{
    font-size: 3rem;
    margin-right: 2rem;
}

/* sections  */
.section
{
    margin-top: 6rem;
}


/* about section  */
.about-section
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.about-grid
{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8rem;
}

.last-child
{
    grid-column:span 2;
}

.main-heading
{
    color: var(--primary-color);
    text-align: center;
    font-size: 3rem;
    margin-bottom: 6rem;
}

.paragraph
{
    font-size: 2rem;
    width: 60%;
    text-align: center;
    color: var(--secondary-color);
    line-height: 4.5rem;
}


.info-box
{
    height: 12rem;
}

.info-icon
{
    color: var(--primary-color);
    font-size: 3.5rem;
}

.info-text
{
    /* width: 3rem; */
    font-size: 2rem;
    color: var(--secondary-color);
}

/* service section  */
.service-section
{
    background-image: url(../imgs/how\ we\ works.jpeg);
    height: fit-content;
    padding-bottom: 5rem;
}

.infograph-wrapper
{
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 5rem;
}

.infograph-container
{
    color: white;
}

.infograph-container:has(div)
{
    display: flex;
    align-items: center;
    padding: 2rem;
}

.infograph-container-blue {background-color: #0071bd;}
.infograph-container-green {background-color: #35c154;}
.infograph-container-red {background-color: #ff5846;}
.infograph-container-yellow {background-color: #feb300;}

.infograph-icon
{
    font-size: 4rem;
    background-color: #fff;
    padding: 2rem;
    border-radius: 50%;
}


.infograph-icon-blue { color: #0071bd ; margin-left: 2rem;}
.infograph-icon-green {color: #35c154 ;}
.infograph-icon-red {color: #ff5846 ; margin-left: 2rem;}
.infograph-icon-yellow {color: #feb300 ;}


.contact-section
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.contact-details-container
{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 4rem;
    justify-content: center;
    align-items: center;
}
.contact-details
{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: .5rem .5rem 3rem rgba(000, 000, 000, .13);
    width: fit-content;
    padding: 1.5rem;
    height: 32rem;
    width: 30rem;
    border-radius: 1.5rem;
}

.contact-details-highlight 
{
    background-color: var(--primary-color);
    color: white;
}

.contact-details-highlight .contact-details-icon 
{
    background-color: #fff;
    color: var(--primary-color);
}

.contact-details-icon
{
    background-color: var(--primary-color);
    color: white;
    height: 3rem;
    width: 3rem;
    font-size: 3rem;
    padding: 1rem;
    border-radius: 50%;
}

.contact-item-highlight
{
    color: white;
}

.contact-button
{
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 5rem;
    font-size: 2rem;
    color: white;
    padding: .5rem 2rem;
}

.email-button
{
    background-color: 	#ff5846;
}

.locaction-button
{
    background-color: white;
    color: var(--primary-color);

}

.call-button
{
    background-color: #35c154;
}

.contact-details-icon-box
{
    height: 8rem;
}

.contact-details-body
{
    height: 18rem;
}

.contact-button-box
{
    height: 6rem;
}


footer
{
    height: 40vh;
    background-color: var(--primary-color);
    margin-top: 8rem;
}

.footer-container
{
    display: grid;
    grid-template-columns: 1fr .5fr 4fr;
}

.footer-logo
{
    height: 10rem;
    border-radius: 50%;
}

.footer-logo
{
    grid-column: 1;
}

.footer-logo-text
{
    font-size: 2rem;
    text-align: center;
}

.footer-list-header
{
    font-size: 2.5rem;
}

.footer-lists
{
    grid-column: 3;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.footer-link
{
    color: white;
    font-size: 2rem;
}

.footer-social
{
    font-size: 3rem;
    margin-bottom: 1rem;
}

.copyright
{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 1rem;
    background-color: var(--secondary-color);
    color: white;
    justify-items: center;
    height: 2.2rem;
    align-items: center;
}

.copyright span a
{
    margin: 1rem;
    font-size: 1.5rem;
}

.copyright a:hover
{
    text-decoration: underline;
}

/* wide screens  */
@media only screen and(min-width:991.5px) and (max-width: 1200px)  {

    .contact-details
    {
        height: 34rem;
    }

    .footer-lists
    {
        grid-template-columns: 2fr 2fr 1fr;
    }
}

/* general for not desktop view  */
@media only screen and (max-width: 991.5px) {
    .navbar
    {
        height: fit-content;
    }

    .navbar-nav
    {
        display: flex;
        flex-direction: column;
        align-items: center;
        /* height: 48rem; */
        height: 83vh;
        padding: 0;
    }

    .navbar-toggler
    {
        margin-left: 6rem;
    }

    .navbar-toggler-icon {
        display: inline-block;
        /* width: 1.5em;
        height: 1.5em; */
        line-height: 4rem;
        font-size: 3rem;
        vertical-align: middle;
        background-image:none;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100%;
        color: var(--primary-color) !important;
    }
    
    .navbar-toggler:focus {
        box-shadow: none;     
    }

    .navbar-collapse
    {
        background-color: #fff;
        width: 100vw;
    }

    .navbar-brand
    {
        margin-right: 6rem;
    }

    .navbar-brand .logo {
        max-height: 9rem;
        max-width: fit-content;
        margin-left: 2rem;
    }

    .infograph-text-box
    {
        margin-right: 1rem;
    }

    .list ul 
    {
        padding-left: .5rem;
    }

    .carousel-indicators
    {
        direction: ltr;
        margin-bottom: 0 !important;
    }

    .footer-email
    {
        white-space: break-spaces;
        line-break: anywhere;
    }
}

/* for adjusting the carsouel  */
@media only screen and (min-height: 576px) and (max-height: 700px)
{
.carsouel-contact
{
    top: 45vh;
}
}

/* for landscaping mode on mobile phone */
@media only screen and (max-height: 575.98px) and (orientation: landscape) {
    
    .fs-1 {
        font-size: calc(1.2rem + 1vw)!important;
    }

    .fs-3
    {
        font-size: calc(1.1rem + .6vw)!important
    }

    .navbar
    {
        height: 6rem !important;
    }
    .navbar-brand
    {
        margin-top: 0;
    }

    .navbar-nav
    {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        justify-items: center !important;
        height: 20rem !important;
    }

    .navbar-brand .logo {
        max-height: 5.5rem !important;
        max-width: fit-content !important;
        margin-left: 2rem !important;
        margin: 0 !important;
    }

    .navbar-toggler-icon
    {
        font-size: 2.5rem;
    }

    .navbar-collapse
    {
        right: 0 !important;
        top: 6rem !important;
    }

    #home
    {
        margin-top: 0;
    }

    .carousel
    {
        margin-top: 0;
    }

    .carousel-caption
    {
        font-size: 1.8rem;
        /* bottom: 16rem; */
        top: 24vh;
    }

    .carousel-caption h2
    {
        font-size: 1.4rem;
        margin-bottom: .5rem;
    }

    .carousel-item img
    {
        height: 92vh;
    }

    .carsouel-contact
    {
        /* top: 20rem; */
        top: 50vh;
        height: 12rem;
    }

    .company-whatsapp
    {
        font-size: 1.3rem;
        padding: .3rem 2.7rem;
    }

    .company-messenger
    {
        font-size: 1.2rem;
        padding: .3rem 2.2rem;
        margin-top: 1rem;
    }

    .company-insta
    {
        margin-top: 1rem;
        font-size: 1.2rem;
    }

    .contacts-icon
    {
        font-size: 1.8rem;
    }

    .carousel-indicators
    {
        /* margin-bottom: 2.8rem; */
    }

    .about-grid
    {
        grid-row-gap: 3rem;
    }
    .info-icon
    {
        font-size: 3rem;
    }

    .info-text
    {
        font-size: 1.5rem;
    }

    .footer-list-header 
    {
        font-size: 2rem;
    }

    .footer-link 
    {
        color: white;
        font-size: 1.5rem;
    }

    .our-page
    {
        margin-top: 0 !important;
    }
}

/* tablets and wider screens  */
@media only screen and (min-width: 665px) and (max-width: 991.5px) {
    .navbar
    {
        height: fit-content;
    }

    .navbar-nav
    {
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 75vh;
        padding: 0;
    }

    .navbar-toggler
    {
        margin-left: 6rem;
    }

    .navbar-toggler-icon {
        display: inline-block;
        /* width: 1.5em;
        height: 1.5em; */
        line-height: 4rem;
        font-size: 3rem;
        vertical-align: middle;
        background-image:none;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100%;
        color: var(--primary-color) !important;
    }
    
    .navbar-toggler:focus {
        box-shadow: none;     
    }

    .navbar-collapse
    {
        background-color: #fff;
        width: 100vw;
        position: absolute;
        top: 9rem;
    }

    .navbar-brand
    {
        margin-right: 6rem;
    }

    .navbar-brand .logo {
        max-height: 9rem;
        max-width: fit-content;
        margin-left: 2rem;
    }

    .about-grid
    {
        width: 100% !important;
    }

    .infograph-wrapper
    {
        width: 100%;
        margin: 0;
    }

    .infograph-icon
    {
        margin: 1rem;
    }

    .contact-details-container
    {
        grid-template-columns: 1fr 1fr;
        justify-content: center;
        align-items: center;
        align-tracks: center, center;
    }

    .contact-details:last-child
    {
        grid-column: span 2;
        justify-self: center;
    }

    .contact-details-icon-box
    {
        height: 8rem;
    }

    .contact-details-body
    {
        height: 18rem;
    }

    .contact-button-box
    {
        height: 6rem;
    }

    footer
    {
        height: fit-content;
    }

    .footer-container
    {
        grid-template-rows: 2fr 3fr;
        grid-row-gap: 4rem;
    }

    .footer-logo-box
    {
        grid-column: span 3;
        grid-row: 1;
        margin-top: 2rem;
    }

    .footer-lists
    {
        grid-row: 2;
        grid-column: span 3;
    }

    .social-list
    {
        flex-wrap: wrap;
        padding: 0 !important;
    }

    .our-page
    {
        width: 100%;
        margin-top: 2rem;
    }
}

/* mobile screens  */
@media only screen and (max-width: 665px) {

    .navbar
    {
        height: 9rem;
    }

    .navbar-toggler
    {
        margin-left: 2rem;
    }

    .navbar-brand
    {
        margin-right: 2rem;
    }

    .navbar-brand .logo {
        max-height: 7rem;
        max-width: fit-content;
        margin-left: 2rem;
    }

    .navbar-collapse
    {
        position: absolute !important;
        top: 9rem !important;
        right: 0;
    }

    .carousel
    {
        margin-top: 8rem;
    }

    .about-section
    {
        margin-top: 3rem;
    }

    .company-whatsapp
    {
        border-radius: 8rem;
        font-size: 1.5rem;
        padding: .5rem 3rem;
    }

    .company-whatsapp:hover
    {
        background-color: #25d366;
        color: white;
    }

    .company-messenger
    {
        font-size: 1.2rem;
        padding: .5rem 3rem;
        margin-top: 2rem;
    }

    .company-insta
    {
        font-size: 1.4rem;
        color: white;
        margin-top: 1.6rem;
    }

    .carousel-caption
    {
        bottom: 29vh;
    }

    .carousel-caption h2
    {
        font-size: 1.5rem;
    }

    .carousel-caption p
    {
        font-size: 2rem;
        margin-top: 1rem;
    }

    .carsouel-contact
    {
        top: 54vh;
    }

    .carousel-indicators
    {
        margin-bottom: 0 !important;
    }

    .about-grid
    {
        grid-gap: 2rem;
        grid-row-gap: 3rem;
        width: 90% !important;
    }

    .info-icon
    {
        font-size: 2.8rem;
    }

    .info-text
    {
        font-size: 1.5rem;
    }

    .infograph-container
    {
        grid-column: span 2;
    }

    .infograph-icon
    {
        margin: 1rem;
    }

    .contact-details-container
    {
        display: grid;
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .social-list
    {
        flex-wrap: wrap;
        padding: 0 !important;
    }

    .our-page
    {
        width: 100%;
        margin-top: 2rem;
    }

    footer
    {
        height: fit-content;
    }

    .footer-container
    {
        display: grid;
        grid-row-gap: 4rem;
    }

    .footer-lists
    {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr);
        grid-column: span 3;
    }

    .social-list-container
    {
        grid-row: 2;
        grid-column: span 4;
    }
    
    .social-list-container .social-list
    {
        display: flex;
        justify-content: space-evenly;
    }

    .footer-logo-box
    {
        grid-column: span 3;
        grid-row: 1;
        margin-top: 2rem;
    }

    .right-list
    {
        grid-column: 1/3;
    }
    .left-list
    {
        grid-column: 3/5;
    }

    .list li h1 
    {
        font-size: 1.8rem !important;
    }

    .footer-link
    {
        font-size: 1.4rem;
    }

    .copyright span a {
        margin: 0.5rem;
        font-size: 1.2rem;
        text-align: center;
    }
}