@import "partials";
html {
    font-size: 20px;
}
body {
    font-family: $primaryFont;
    font-weight: 400;
}
img {
    max-width: 100%;
}
.custom-container {
    @media ($lg-1442){
        max-width: 1200px;
    }
    @media (min-width: 1600px){
        max-width: 1300px;
    }
    @media ($sm-767){
        max-width: 100%;
    }
}

.banner-space-wrap{ padding: 0 40px;
    @media ($sm-1199){padding: 0 20px;}
}
.banner-patter-1{ min-height: 390px; display: flex; align-items: center; padding:20px 0;
    @media ($sm-1679){min-height: 350px;}
    @media ($sm-991){min-height: 290px;}
    @media ($sm-579){min-height: 250px;}
    .content-wrap{height: auto; margin: 0; padding: 0; text-align: center; 
        .pagination{ padding: 0 0 10px 0;
            .listing{display: flex; justify-content: center; margin: 0; padding: 0; width: 100%; gap: 10px;
                @media ($sm-767){gap: 5px;}
                li{ color: $dark; font-size: 15px; opacity: .5; list-style: none;
                    @media ($sm-1679){font-size: 14px;}
                    @media ($sm-767){font-size: 12px;}
                    &.active{ opacity: 1;}
                    svg{width: 10px;
                        @media ($sm-767){width: 8px;}
                        path{fill: $dark;}
                    }
                }
            }
        }
        .title{font-size: 62px; color: $dark; line-height: 1.1; padding: 0 0 15px 0; margin: 0 auto; max-width: 550px;
            @media ($sm-1679){ font-size: 54px;}
            @media ($sm-1441){font-size: 50px;}
            @media ($sm-1199){font-size:46px;}
            @media ($sm-991){font-size: 42px;}
            @media ($sm-767){font-size: 40px; padding-bottom: 10px;}
            @media ($sm-579){font-size: 38px;}
            @media ($sm-479){font-size: 34px;}
            span{color: $primary;}
            .block{display: block;}
        }
        .para{font-size: 16px; line-height: 1.6; color: $dark; padding: 0 0 0 0; margin: 0 auto; max-width: 550px;
            @media ($sm-1679){font-size: 14px;}
            @media ($sm-767){ line-height: 1.4; font-size: 13px;}
        }
    }
    &.newsletter{background:url(../img/newsletter-banner.png) no-repeat top center / cover;}
    &.about-yad{ background: url(../img/about-yad.png) no-repeat top center / cover; min-height: 512px;
        @media ($sm-1441){min-height: 390px;}
        @media ($sm-991){min-height: 320px;}
        @media ($sm-767){min-height: 270px;}
        @media ($sm-579){min-height: 250px;}
        .content-wrap{text-align: left;
            .pagination{
                .listing{justify-content: start;}
            }
            .title{margin: 0;}
            .para{margin: 0;}
        }
    }
    &.apply-for{background: url(../img/apply-banner.png) no-repeat top center / cover;}
    &.sponsor { background: url(../img/sponser-kallah.png) no-repeat top center / cover; height: 410px;
    .content-wrap { text-align: left;
        .title {max-width: inherit !important; margin: 0;}
        }
    }
}

.content-head{ text-align: center; padding: 0 0 70px 0;
    @media ($sm-1679){padding-bottom: 50px;}
    @media ($sm-767){ padding-bottom: 40px;}
    .title{font-size: 62px; color: $dark; font-weight: 400; line-height: 1.2; margin: 0 auto; padding: 0 0 15px 0; max-width: 680px;
        @media ($sm-1679){ font-size: 58px;}
        @media ($sm-1441){font-size: 54px;}
        @media ($sm-1199){font-size: 50px;}
        @media ($sm-991){font-size: 48px; padding-bottom: 10px;}
        @media ($sm-767){font-size: 44px;}
        @media ($sm-579){font-size: 42px;}
        @media ($sm-479){font-size: 40px;}
        span{ color: $primary;}
    }
    .para{font-size: 16px; line-height: 1.6; color: $dark; padding: 0 0 0 0; max-width: 680px; margin: 0 auto;
        @media ($sm-1679){font-size: 14px;}
        @media ($sm-767){ line-height: 1.4; font-size: 13px;}
    }
}

.tag{ background: $white; border-radius: 30px; display: inline-flex; align-items: center; gap: 10px; padding: 8px 15px 8px 10px; margin: 0 0 20px 0;
    @media ($sm-579){ padding: 6px 15px 6px 10px;}
    .img{width: 23px;
        @media ($sm-1679){width: 20px;}
        @media ($sm-991){width: 18px;}
        @media ($sm-767){font-size: 16px;}
        @media ($sm-579){width: 16px;}
    }
    span{color: $primary; font-size: 16px; font-weight: 700;
        @media ($sm-1679){font-size: 14px;}
        @media ($sm-991){font-size: 12px;}
    }
    &.full-bg{ background:$primary;
        span{color: #FBFBFB;}
    }
}

.head-wrap{text-align: center; padding: 0 0 50px 0;
    @media($sm-991){padding-bottom: 40px;}
    @media ($sm-767){padding-bottom: 30px;}
    .title{ font-size: 62px; color: $dark; font-weight: 400; margin: 0 0 20px 0; padding: 0; line-height: 1;
        @media ($sm-1679){ font-size: 58px;}
        @media ($sm-1441){font-size: 54px;}
        @media ($sm-1199){font-size: 50px;}
        @media ($sm-991){font-size: 48px;}
        @media ($sm-767){font-size: 44px; margin-bottom: 10px;}
        @media ($sm-579){font-size: 42px;}
        @media ($sm-479){font-size: 40px;}
        span{color: $primary;}
    }
    .para{max-width: 700px; margin: 0 auto; color: #293535; font-size: 18px; line-height: 1.6; padding: 0;
        @media ($sm-1679){font-size: 16px;}
        @media ($sm-991){max-width: 600px; font-size: 14px;}
        @media ($sm-767){ font-size: 14px; line-height: 1.4;}
        @media ($sm-479){font-size: 13px; }
    }
}