/****************************************************************************************************
Collage Css Start here
****************************************************************************************************/
.collage {
    background: #000;
}

.collage {
    margin: 0px;
    background: #000;
}

.collageslide {
    position: relative;
    width: 100%;
    min-height: 580px;
    background-color: #000;
}

.taglineareabg {
    position: absolute;
    width: 100%;
    height: 360px;
    display: table;
    z-index: 99;
    margin-top: 110px;
}

.taglinearea {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

    .taglinearea h1 {
        font-size: 50px;
        color: #fff;
        line-height: 52px;
        margin-top: 0px;
        margin-bottom: 15px;
    }

    .taglinearea h6 {
        font-size: 25px;
        color: #fff;
        line-height: 20px;
        font-weight: 400;
        margin-top: 0px;
        margin-bottom: 0px;
    }
/****************************************************************************************************
Others Css Start here
****************************************************************************************************/
.pointersband {
    background: #238ea6;
    padding: 10px 0px;
}

.pointersbox {
    padding: 10px 0px;
    min-height: 62px;
    padding-right: 20px;
}

    .pointersbox h6 {
        font-size: 15px;
        color: #fff;
        line-height: 18px;
        margin-top: 0px;
        margin-bottom: 0px;
    }

.pointersborder {
    border-left: solid 1px rgba(255, 255, 255, 0.3);
    padding-left: 30px;
}

.umrahcontarea {
    background: #ffffff;
    padding: 70px 0px;
}

    .umrahcontarea h2 {
        font-size: 30px;
        color: #1e1e1e;
        line-height: 32px;
        font-weight: 500;
        text-transform: uppercase;
        text-align: center;
        margin-top: 0px;
        margin-bottom: 10px;
    }

        .umrahcontarea h2:before {
            content: '';
            font-size: 26px;
            margin: 15px 0px 5px 0px;
            width: 60px;
            height: 2px;
            position: absolute;
            background: #238ea6;
            left: 50%;
            transform: translate(-50%, -50%);
            margin-top: 48px;
        }

.ziyaratcontarea {
    background: url("../img/ziyaratbg.jpg") no-repeat fixed top center #238ea6;
    padding: 70px 0px;
}

    .ziyaratcontarea h2 {
        font-size: 30px;
        color: #fff;
        line-height: 32px;
        font-weight: 500;
        text-transform: uppercase;
        text-align: center;
        margin-top: 0px;
        margin-bottom: 10px;
    }

        .ziyaratcontarea h2:before {
            content: '';
            font-size: 26px;
            margin: 15px 0px 5px 0px;
            width: 60px;
            height: 2px;
            position: absolute;
            background: #fff;
            left: 50%;
            transform: translate(-50%, -50%);
            margin-top: 48px;
        }

.ramadancontarea {
    background: url("../img/ramadanbg.jpg") no-repeat fixed top center #f8a830;
    padding: 70px 0px;
}

    .ramadancontarea h2 {
        font-size: 30px;
        color: #1e1e1e;
        line-height: 32px;
        font-weight: 500;
        text-transform: uppercase;
        text-align: center;
        margin-top: 0px;
        margin-bottom: 10px;
    }

        .ramadancontarea h2:before {
            content: '';
            font-size: 26px;
            margin: 15px 0px 5px 0px;
            width: 60px;
            height: 2px;
            position: absolute;
            background: #238ea6;
            left: 50%;
            transform: translate(-50%, -50%);
            margin-top: 48px;
        }

.packageboxpadd {
    padding: 15px 15px;
}

.packagebox {
    background: #fff;
    border-radius: 12px;
    padding: 0px;
    -webkit-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
}

.packageboximg {
    background: url(../img/noimage.png) no-repeat center center #f9f9f9;
    width: 100%;
    height: 260px;
    border-radius: 12px;
}

    .packageboximg img {
        width: 100%;
        height: 260px;
        border-radius: 12px 12px 0px 0px;
        object-fit: cover;
        object-position: 50% 50%;
    }

.packageboxheading {
    padding: 15px 12px;
    min-height: 80px;
}

    .packageboxheading h3 {
        font-size: 17px;
        color: #000;
        line-height: 20px;
        font-weight: 500;
        margin-top: 7px;
        margin-bottom: 0px;
    }

        .packageboxheading h3 a {
            color: #000;
            text-decoration: none;
        }

            .packageboxheading h3 a:hover {
                color: #238ea6;
                text-decoration: none;
            }

.packageboxmidcont {
    border-top: dotted 1px #afafaf;
    border-bottom: dotted 1px #afafaf;
    padding: 10px 0px;
}

.packageboxmidborder {
    border-left: dotted 1px #afafaf;
}

.packageboxhotelbox {
    text-align: center;
    padding: 10px 10px;
}

    .packageboxhotelbox h6 {
        font-size: 15px;
        color: #2b2a29;
        line-height: 15px;
        margin-top: 10px;
        margin-bottom: 10px;
        min-height: 30px;
    }

.packagenightext {
    font-size: 12px;
    color: #000;
    line-height: 14px;
    background: rgba(248, 168, 48, 0.85);
    position: relative;
    width: 100%;
    margin-top: -42px;
    padding: 14px 14px;
    backdrop-filter: blur(5px);
    height: 55px;
}

.packageboxpricearea {
    padding: 12px 12px 12px 12px;
    background-color: #fff6e9;
    border-radius: 0px 0px 10px 10px;
}

.hajjcontarea {
    background: url(../img/hajjcontareabg.jpg) no-repeat fixed left top;
    background-size: cover;
    padding: 80px 0px;
}

    .hajjcontarea h2 {
        font-size: 30px;
        color: #000;
        line-height: 32px;
        font-weight: 500;
        text-transform: uppercase;
        text-align: center;
        margin-top: 0px;
        margin-bottom: 10px;
    }

        .hajjcontarea h2:before {
            content: '';
            font-size: 26px;
            margin: 15px 0px 5px 0px;
            width: 60px;
            height: 2px;
            position: absolute;
            background: #238ea6;
            left: 50%;
            transform: translate(-50%, -50%);
            margin-top: 48px;
        }

.featuredhotelsarea {
    background: #ffffff;
    margin: 0 auto;
    padding: 80px 0px;
}

    .featuredhotelsarea h2 {
        font-size: 30px;
        color: #1e1e1e;
        line-height: 32px;
        font-weight: 500;
        text-transform: uppercase;
        text-align: center;
        margin-top: 0px;
        margin-bottom: 30px;
    }

        .featuredhotelsarea h2:before {
            content: '';
            font-size: 26px;
            margin: 15px 0px 5px 0px;
            width: 60px;
            height: 2px;
            position: absolute;
            background: #238ea6;
            left: 50%;
            transform: translate(-50%, -50%);
            margin-top: 48px;
        }

.featuredhotelbox {
    border-radius: 12px;
    margin-bottom: 20px;
}

.featuredhotelboximg {
    position: relative;
    border-radius: 12px;
    background: url(../img/noimage.png) no-repeat center center #000;
    width: 100%;
    height: 345px;
    overflow: hidden;
}

    .featuredhotelboximg img {
        width: 100%;
        height: 345px;
        border-radius: 12px;
        opacity: 1;
        -webkit-transition: .3s ease-in-out;
        transition: .3s ease-in-out;
        object-fit: cover;
        object-position: 50% 50%;
    }

        .featuredhotelboximg img:hover {
            transform: scale(1.1);
        }

.featuredhotelboxshade {
    background: rgba(0, 0, 0, 0.03);
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.03) 0%, rgba(0, 0, 0, 0.5) 32%, rgba(0, 0, 0, 1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.03)), color-stop(32%, rgba(0, 0, 0, 0.5)), color-stop(100%, rgba(0, 0, 0, 1)));
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.03) 0%, rgba(0, 0, 0, 0.5) 32%, rgba(0, 0, 0, 1) 100%);
    background: -o-linear-gradient(top, rgba(0, 0, 0, 0.03) 0%, rgba(0, 0, 0, 0.5) 32%, rgba(0, 0, 0, 1) 100%);
    background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.03) 0%, rgba(0, 0, 0, 0.5) 32%, rgba(0, 0, 0, 1) 100%);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.03) 0%, rgba(0, 0, 0, 0.5) 32%, rgba(0, 0, 0, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#000000', GradientType=0);
    width: 100%;
    padding: 40px 25px 25px 25px;
    position: absolute;
    bottom: 0;
    border-radius: 0px 0px 12px 12px;
    z-index: 9;
}

    .featuredhotelboxshade h3 {
        font-size: 20px;
        color: #fff;
        font-weight: 500;
        line-height: 20px;
        margin-top: 0px;
        margin-bottom: 3px;
    }

        .featuredhotelboxshade h3 a {
            color: #ffffff;
            text-decoration: none;
        }

.hoteldistancetext {
    font-size: 12px;
    color: #fff;
    margin-top: 7px;
}

.hotelcitybox {
    position: absolute;
    z-index: 1;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    padding: 5px 15px;
    display: table;
    text-align: center;
    border-radius: 30px;
    margin: 5px 0px 0px 5px;
}

    .hotelcitybox h4 {
        font-size: 12px;
        color: #fff;
        line-height: 16px;
        font-weight: 500;
        margin-top: 0px;
        margin-bottom: 0px;
        display: table-cell;
        vertical-align: middle;
    }

        .hotelcitybox h4 svg {
            margin-right: 7px;
            height: 16px;
            fill: #fff;
            vertical-align: middle;
        }

.whyusarea {
    background: url(../img/whyusbg.png) repeat center center #238ea6;
    padding: 50px 0px;
}

    .whyusarea h2 {
        font-size: 40px;
        color: #fff;
        line-height: 40px;
        font-weight: 500;
        text-transform: uppercase;
        text-align: center;
        margin-top: 0px;
    }

.whyusbox {
    margin-bottom: 0px;
    text-align: center;
    background-color: rgba(35,142,166,0.5);
    border-radius: 12px;
    color: #fff;
    min-height: 125px;
}

    .whyusbox h4 {
        font-size: 15px;
        color: #fff;
        line-height: 18px;
        font-weight: 500;
        text-align: center;
        margin-top: 5px;
    }

.whyusiconcircle {
    background: none;
    width: 80px;
    height: 60px;
    display: table;
    text-align: center;
    margin: 0px auto;
}

.whyusicon {
    display: table-cell;
    vertical-align: middle;
    padding-top: 15px;
}

    .whyusicon svg {
        height: 45px;
        fill: #fff;
    }

.callusarea {
    background: #006338;
    padding: 30px 0px;
}

.callustext {
    font-size: 15px;
    color: #fff;
    line-height: 24px;
    font-weight: 500;
}

    .callustext span {
        font-size: 23px;
    }

.callusorline {
    border-bottom: solid 1px #fff;
    width: 95px;
    margin: 25px auto 0px auto;
}

.callusorcircle {
    position: relative;
    background: #fff;
    border: solid 1px #fff;
    width: 41px;
    height: 41px;
    border-radius: 100%;
    font-size: 16px;
    color: #238ea6;
    font-weight: 500;
    text-align: center;
    margin: -21px auto 0px auto;
    padding-top: 7px;
}

.pilgrimsspeakarea {
    background: #e2f7fd;
    padding: 80px 0px;
}

    .pilgrimsspeakarea h2 {
        font-size: 30px;
        color: #1e1e1e;
        line-height: 32px;
        font-weight: 500;
        text-transform: uppercase;
        text-align: center;
        margin-top: 0px;
        margin-bottom: 20px;
    }

        .pilgrimsspeakarea h2:before {
            content: '';
            font-size: 26px;
            margin: 15px 0px 5px 0px;
            width: 60px;
            height: 2px;
            position: absolute;
            background: #238ea6;
            left: 50%;
            transform: translate(-50%, -50%);
            margin-top: 48px;
        }

.pilgrimsspeakbox {
    margin-bottom: 30px;
    background-color: #fff;
    padding: 10px;
    border-radius: 12px;
    min-height: 225px;
}

    .pilgrimsspeakbox h4 {
        font-size: 17px;
        color: #238ea6;
        line-height: 22px;
        font-weight: 500;
        margin-top: 5px;
        margin-bottom: 0px;
    }

.recentarticlesarea {
    background: #ffffff;
    padding: 80px 0px;
}

    .recentarticlesarea h2 {
        font-size: 30px;
        color: #1e1e1e;
        line-height: 32px;
        font-weight: 500;
        text-transform: uppercase;
        text-align: center;
        margin-top: 0px;
        margin-bottom: 20px;
    }

        .recentarticlesarea h2:before {
            content: '';
            font-size: 26px;
            margin: 15px 0px 5px 0px;
            width: 60px;
            height: 2px;
            position: absolute;
            background: #238ea6;
            left: 50%;
            transform: translate(-50%, -50%);
            margin-top: 48px;
        }

.recentarticlesbox {
    margin-bottom: 30px;
    background-color: #ffffff;
    border-radius: 12px;
    padding: 8px;
    -webkit-box-shadow: 5px 13px 23px 10px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: 5px 13px 23px 10px rgba(0, 0, 0, 0.05);
    box-shadow: 5px 13px 23px 10px rgba(0, 0, 0, 0.05);
}

.articlecont {
    font-size: 15px;
    font-weight: 400;
    padding: 15px;
}

    .articlecont .link a {
        font-size: 13px;
        font-weight: 400;
        color: #094bc3;
        text-decoration: underline;
    }

.recentarticlesbox h4 {
    font-size: 17px;
    color: #1e1e1e;
    line-height: 22px;
    font-weight: 500;
    margin-top: 15px;
    margin-bottom: 15px;
}

    .recentarticlesbox h4 a {
        color: #1e1e1e;
        text-decoration: none;
    }

        .recentarticlesbox h4 a:hover {
            color: #238ea6;
            text-decoration: none;
        }

.recentarticlesboximg {
    background: url(../img/noimage.png) no-repeat center center #f9f9f9;
    width: 100%;
    height: 190px;
    border-radius: 8px;
}

    .recentarticlesboximg img {
        width: 100%;
        height: 190px;
        border-radius: 8px;
        object-fit: cover;
        object-position: 50% 50%;
    }

.aboutusarea {
    background: url("../img/aboutusbg.jpg") no-repeat fixed top center #295da7;
    padding: 80px 0px;
}

    .aboutusarea h2 {
        font-size: 30px;
        color: #fff;
        line-height: 32px;
        font-weight: 500;
        text-transform: uppercase;
        margin-top: 0px;
        margin-bottom: 20px;
    }

        .aboutusarea h2:before {
            content: '';
            font-size: 26px;
            margin: 15px 0px 5px 0px;
            width: 60px;
            height: 2px;
            position: absolute;
            background: #238ea6;
            margin-top: 48px;
        }

    .aboutusarea h3 {
        font-size: 23px;
        color: #fff;
        line-height: 25px;
        font-weight: 500;
        text-transform: uppercase;
        margin-top: 0px;
        margin-bottom: 15px;
    }

.aboutustext {
    font-size: 14px;
    color: #000;
    line-height: 24px;
}

.aboutusbox {
    margin-bottom: 30px;
}

.aboutusboximg {
    background: url(../img/noimage.png) no-repeat center center #f9f9f9;
    width: 360px;
    height: 370px;
    border-radius: 10px;
    position: relative;
    -webkit-box-shadow: 0px 10px 15px 0px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 10px 15px 0px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 10px 15px 0px rgba(0, 0, 0, 0.3);
}

    .aboutusboximg img {
        width: 360px;
        height: 370px;
        border-radius: 10px;
        object-fit: cover;
        object-position: 50% 50%;
    }

.aboutuscont {
    background-color: #f8a830;
    border-radius: 10px;
    border: 2px solid #f8a830;
    padding: 30px;
    color: #1e1e1e;
    position: absolute;
    width: 360px;
    font-size: 15px;
    margin-top: -322px;
    margin-left: 300px;
}

    .aboutuscont a {
        color: #094bc3;
        text-decoration: underline;
        font-size: 13px;
    }

.aboutusboxcont {
    position: absolute;
    border-radius: 5px;
    width: 100%;
    height: 280px;
    display: table;
    padding: 20px 20px;
    background: rgba(0, 132, 75, 0);
    background: -moz-linear-gradient(top, rgba(0, 132, 75, 0) 0%, rgba(0, 132, 75, 0.2) 40%, rgba(0, 132, 75, 1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0, 132, 75, 0)), color-stop(40%, rgba(0, 132, 75, 0.2)), color-stop(100%, rgba(0, 132, 75, 1)));
    background: -webkit-linear-gradient(top, rgba(0, 132, 75, 0) 0%, rgba(0, 132, 75, 0.2) 40%, rgba(0, 132, 75, 1) 100%);
    background: -o-linear-gradient(top, rgba(0, 132, 75, 0) 0%, rgba(0, 132, 75, 0.2) 40%, rgba(0, 132, 75, 1) 100%);
    background: -ms-linear-gradient(top, rgba(0, 132, 75, 0) 0%, rgba(0, 132, 75, 0.2) 40%, rgba(0, 132, 75, 1) 100%);
    background: linear-gradient(to bottom, rgba(0, 132, 75, 0) 0%, rgba(0, 132, 75, 0.2) 40%, rgba(0, 132, 75, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#238ea6', endColorstr='#238ea6', GradientType=0);
}

    .aboutusboxcont h3 {
        font-family: 'El Messiri', sans-serif;
        font-size: 30px;
        color: #fff;
        line-height: 30px;
        font-weight: 500;
        margin-top: 0px;
        margin-bottom: 0px;
        display: table-cell;
        vertical-align: bottom;
    }

.hajjpackagebox {
    border-radius: 12px;
    margin-bottom: 30px;
    padding:15px 15px;
}

.hajjpackageboximg {
    position: relative;
    border-radius: 12px;
    background: url(../img/noimage.png) no-repeat center center #000;
    width: 100%;
    height: 335px;
    overflow: hidden;
}

    .hajjpackageboximg img {
        width: 100%;
        height: 335px;
        border-radius: 12px;
        opacity: 1;
        -webkit-transition: .3s ease-in-out;
        transition: .3s ease-in-out;
        object-fit: cover;
        object-position: 50% 50%;
    }

        .hajjpackageboximg img:hover {
            transform: scale(1.1);
        }

.hajjpackageboxshade {
    background: rgba(0, 0, 0, 0.03);
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.75) 28%, rgba(0, 0, 0, 1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.00)), color-stop(28%, rgba(0, 0, 0, 0.75)), color-stop(100%, rgba(0, 0, 0, 1)));
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.75) 28%, rgba(0, 0, 0, 1) 100%);
    background: -o-linear-gradient(top, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.75) 28%, rgba(0, 0, 0, 1) 100%);
    background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.75) 28%, rgba(0, 0, 0, 1)100%);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.75) 28%, rgba(0, 0, 0, 1)100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#000000', GradientType=0);
    width: 100%;
    padding: 40px 25px 25px 25px;
    position: absolute;
    bottom: 0;
    border-radius: 0px 0px 12px 12px;
    z-index: 9;
}

    .hajjpackageboxshade h3 {
        font-size: 20px;
        color: #ffffff;
        font-weight: 500;
        line-height: 20px;
        margin-top: 0px;
        margin-bottom: 3px;
    }

        .hajjpackageboxshade h3 a {
            color: #ffffff;
            text-decoration: none;
        }

.hajjpacknightext {
    font-size: 13px;
    color: #fff;
    font-weight: 400;
}
/****************************************************************************************************
Media Query css start here
****************************************************************************************************/
@media screen and (min-width : 1920px) {
}

@media screen and (max-width : 1080px) {
    .taglineareabg {
        margin-top: 40px;
    }
}

@media screen and (max-width : 992px) {
    .taglineareabg {
        margin-top: 0px;
    }

    .pointersbox {
        min-height: 74px;
    }

    .pointersborder {
        padding-left: 20px;
    }

    .whyusbox h4 {
        font-size: 16px;
        line-height: 20px;
    }
}

@media screen and (max-width : 767px) {
    .taglineareabg {
        margin-top: 70px;
        height: auto;
        background: none;
    }

    .pointersband {
        padding: 0px 0px;
    }

    .pointersbox {
        min-height: auto;
    }

    .pointersborder {
        border-left: solid 0px rgba(255, 255, 255, 0.3);
        border-top: solid 1px rgba(255, 255, 255, 0.3);
        padding-left: 0px;
    }

    .aboutusboximg {
        width: 100%;
        height: 320px;
    }

        .aboutusboximg img {
            width: 100%;
            height: 320px;
        }

    .aboutuscont {
        position: relative;
        width: 90%;
        padding: 15px 20px;
        font-size: 14px;
        margin: -80px auto 0px auto;
    }
}

@media screen and (max-width : 480px) {
    .taglinearea h1 {
        font-size: 26px;
        line-height: 26px;
        margin-bottom: 10px;
    }

    .taglinearea h6 {
        font-size: 16px;
        line-height: 16px;
    }

    .umrahcontarea h2 {
        font-size: 35px;
        line-height: 35px;
    }

    .packageboxheading {
        padding: 15px 7px;
    }

    .packageboxhotelbox {
        padding: 10px 5px;
    }

    .packageboxpricearea {
        padding: 20px 7px 12px 7px;
    }

    .hajjcontarea h2 {
        font-size: 35px;
        line-height: 35px;
    }

    .featuredhotelsarea h2 {
        font-size: 35px;
        line-height: 35px;
    }

    .whyusarea h2 {
        font-size: 35px;
        line-height: 35px;
    }

    .aboutusarea h2 {
        font-size: 35px;
        line-height: 35px;
    }
}

@media screen and (max-width : 375px) {
}

@media screen and (max-width : 320px) {
}