@import url('https://fonts.googleapis.com/css2?family=Noto+Nastaliq+Urdu:wght@400..700&display=swap');
/* @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Naskh+Arabic:wght@400..700&display=swap');
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
     /*font-family: "Roboto", sans-serif; */
    /* font-family: "Poppins", sans-serif; */
}

/* Define the font for Urdu text */
@font-face {
    font-family: 'Nastaliq';
    src: url('path/to/Nastaliq.eot'); /* IE9 Compat Modes */
    src: url('path/to/Nastaliq.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('path/to/Nastaliq.woff2') format('woff2'), /* Super Modern Browsers */
         url('path/to/Nastaliq.woff') format('woff'), /* Pretty Modern Browsers */
         url('path/to/Nastaliq.ttf') format('truetype'), /* Safari, Android, iOS */
         url('path/to/Nastaliq.svg#Nastaliq') format('svg'); /* Legacy iOS */
}

/* Apply the Urdu font to elements containing Urdu characters */
.urdu-text {
    font-family: "Noto Naskh Arabic", serif;
    font-size: .5rem;
    
    
}

/* Define the font for English text */
@font-face {
    font-family: 'EnglishFont';
    src: url('path/to/EnglishFont.ttf') format('truetype');
    /* Add additional src declarations if your font supports multiple file formats */
}

/* Apply the English font to elements containing English characters */
.english-text {
    font-family: 'EnglishFont', Arial, sans-serif; /* Fallback fonts for compatibility */
}


/* Define the font for elements containing both Urdu and English characters */
.mixed-text {
    font-family: 'Nastaliq', 'EnglishFont', serif, Arial, sans-serif; /* Fallback fonts for compatibility */
}



h1{
    /* text-shadow: 2px 2px 2px rgba(191, 143, 42, 1); */
    font-weight:600;
    color:#7f7c7c;
}

/** ========== Navbar styling ========== */

.mainNavbar{
    display: flex;
    /* align-items: center; */
    justify-content: space-between;
    flex-direction: column;
    background: url(Images/QQQQQ.png);
    /* background-size: cover; */
    background-color: #f6f6f6;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    margin-top: -6px;
    border-bottom: .1px solid #ada3a3;
}
.navbar{
    width: 100%;
    height: 98px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}


.navbar-text-aligemt{
    /* font-size: 12px;  */
    /* background-color: white; */
}

.navbar-text-aligemt p{
    font-size: 14px;
     font-weight: bolder;
      margin-left: -80px;
}


.navbarHeading{
    margin: 10px;
}
.navbarHeading h1{
    color: #000;
    /* color: rgba(red, green, rgb(0, 0, 238), alpha); */
}
.logo {
    max-width: 94%;
    height: auto;
}
.nav-branding img{
    width: 100px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.nav-menu{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4rem;
}
.nav-item{
    list-style: none;
}
.nav-link {
    color: lightgray;
    font-size: 18px;
    font-weight: 400;
    text-decoration: none;
    transition: 0.7s ease;
}
.nav-link:hover{
    color: dodgerblue;
}
.searchIcon i{
    font-size: 30px;
}
.hamPlusIcon{
    display: none;
}
.hamburger{
    display: none;
    cursor: pointer;
}
.bar{
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px 0;
    background-color: #000;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.search{
    gap: 1px;
    height: 26px;
}
.search-btn, .close-btn {
    width: 30px;
    height: 29px;
    font-size: 20px;
    background-color: transparent; 
    color: rgb(0, 0, 0);
    border: none;
    cursor: pointer;
    position: relative;
    transition: all 0.25s ease;
    align-items: center;
    justify-content: center;
   
  }
  
  
  .close-btn {
    color: rgb(0, 0, 0);
    z-index: -1;
  }
  
  .search-box {
    /* width: 30px;
    height: 40px;
    padding: 15px;
    border-radius: 25px; */
     background-color: transparent; 
    color: rgb(0, 0, 0);
    outline: none;
    border-bottom: none;
    border-top: none;
    border-right:none;
    border-left:none;
    transition: width 0.25s ease;
    border-radius:4px;
         width: 123px; 
     margin-left: 7px; 
    /* margin-top: 9px */
  }

  
  
  .search {
    display: flex;
    align-items: center;
    border: .1px solid;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    border-top-right-radius: 5px;
    margin-bottom: 0px;
     height: 26px;
    top:20px;
     
  }
  

  .active .search-box {
    width: 85px;
    margin-left: 7px;
    
  }
  
  .active .search-btn {
    transform: translate(210px, 2px) scale(0.8);
    background-color: transparent;
    margin-left: -242px;
  }
  
  .active .close-btn {
    z-index: 0;
    margin-right: 172px;
    transform: translate(250px, 2px);
  }
  

/** ========== carousel styling ========== */

.bootstrapCarousel{
    display: flex;
    align-items: center;
    justify-content: center;
}
.carousel{
    width: 100%;
}
.carousel-item .content{
    width: 100%;
    height: 218px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}
.carousel-item .content p{
    width: 70%;
}

/** ========== Shadow Boxes styling ========== */

.shadowBoxes{
   margin-top:31px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 70px;
}
.boxPlusTriangle{
    position: relative;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.boxPlusTriangle .shadowBox{
    width: 130px;
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.boxPlusTriangle .shadowBox i{
    font-size: 25px;
}
.boxPlusTriangle .shadowBox h2{
    padding: 0px 0 0;
    font-size: 15px;
    color:#6f6e6e;
}

/** ========== Services styling ========== */

.services{
    padding: 20px;
    background: url(Images/image.png);
}
.servicesContent{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    margin-top:5px;
   
}
.serviceBox{
    width: 49%;
    padding: 10px;
    text-align: center;
    cursor: pointer;
    /* box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; */
}
.serviceBox img{
    width: 40px;
    height: 40px;
}
.headingPlusSoon{
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    margin-left:9px;
}
.headingPlusSoon p{
    margin: 0;
    color: #dc3545;
    font-size:11px;
        margin-top: -4px;
}
.headingPlusSoon span{
    width: 4px;
    height: 23px;
    bottom: 0px;
             background: linear-gradient(to bottom,#fae76b, #ac7420, #ac7420);
    /* box-shadow: 0 0 1px #dfa000, 0 0 7px #dfa000, 0 0 15px #dfa000, 0 0 30px #dfa000;  */
    /* Neon glow effect */
    border-radius: 1px; /* Optional: to soften the edges */
}
.headingPlusSoon h1{
   display: flex;
    margin-top: 0;
    margin-left: 5px;
    font-size: 20px;
}
.activehading span {
    width: 4px;
    height: 23px;
             background: linear-gradient(to bottom,#fae76b, #ac7420, #ac7420); /* Base color */
    /* box-shadow: 0 0 5px #dfa000, 0 0 15px #dfa000, 0 0 30px #dfa000, 0 0 60px #dfa000; */
     /* Neon glow effect */
    border-radius: 1px; /* Optional: to soften the edges */
}



.blogHeading span{
    width:4px; 
    height:24px;
    bottom:0px;
    margin-left:2px;
             background: linear-gradient(to bottom,#fae76b, #ac7420, #ac7420); /* Base color */
    /* box-shadow: 0 0 5px #dfa000, 0 0 15px #dfa000, 0 0 30px #dfa000, 0 0 60px #dfa000; */
     /* Neon glow effect */
    border-radius: 2px; /* Optional: to soften the edges */
}
.boxDesign{
    width: 100%;
    height: 191vh;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.leftSide{
    width: 40%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
}
.leftBox{
    width: 100%;
    height: 30%;
    padding: 20px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
#bottomLeftBox{
    height: 300px;
}
.leftBox img{
    width: 60px;
    height: 60px;
}
.leftBox h2{
    margin: 10px 0;
}
.rightSide{
    width: 60%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
}
.rightBox{
    width: 100%;
    height: 29.3%;
    padding: 20px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}


/* .rightBox img h2 p{
    width: 100%;
    height: 29.3%;
    padding: 20px;
    text-align: center;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
} */


#bottomRightBox{
    height: 185px;
}
.rightBox img{
    width: 60px;
    height: 60px;
}
.rightBox h2{
    margin: 10px 0;
}
.rightSide .rightMiddleBox{
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    justify-content: flex-end;
}
.rightSide .rightMiddleBox p{
    width: 400px;
}
.circle{
    width: 280px;
    height: 280px;
    border-radius: 50%;
    text-align: center;
    background-color: #fff;
    border: 2px solid sandybrown;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    position: absolute;
    top: 48%; left: 40%;
    transform: translate(-50%,-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin: 10px;
}
.circleContent img{
    width: 60px;
    height: 60px;
}
.circleContent h2{
    margin: 10px 0;
}

.urdu-artical-heading{
    margin-right: 3px;
}



    /** ========== Demographic styling ========== */

  
    .demographic {
        margin: 20px;
        padding: 20px;
        height: 30vh;
        color: #fff;
        background: linear-gradient(to top, rgba(0, 0, 0, 1.5), rgba(0, 0, 0, 0)), url(Images/2149093908.jpg);
        background-size: cover;
        object-fit: cover;
        position: relative;
    }
    .demographic h2{
        position: absolute;
        bottom: 50px;
        font-size: 40px;
    }
    .demographic p{
        position: absolute;
        bottom: 30px;
        font-size: 20px;
    }





    /** ========== Three Circles section styling ========== */

    .threeCirclePlusDesign{
        position: relative;
    }
    .threeCircles{
        height: 50vh;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 35px;
    }
    .triCircle{
        width: 200px;
        height: 200px;
        border-radius: 50%;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    }
    .triCircle img{
        width: 60px;
        height: 60px;
    }
    .triCircle h3{
        margin: 10px 0;
    }
    .triCircle p{
        color:#dc3545;
    }
    .circleDesign img{
        height: 220px;
        position: absolute;
        top: 50%; left: 50%;
        transform: translate(-50%, -50%);
    }

    /** ========== Quotations section styling ========== */

    .quoteSection{
        margin: 20px;
        position: relative;
        
    }
    .activehading{
        align-items: center;
        gap: 15px;
    }
    .activehading p{
        margin: 0;
        font-size: 11px;
        color: #C31E1E;
        text-align: center;
    }
    .quoteSection h1{
        font-size: 21px;
        margin: -2px -4px 10px;
    }
    .quotations{
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 16px;
    }
    .quotationsPage{
        display: flex;
        align-items: start;
        flex-wrap: wrap;
        gap: 16px;
        margin-top:118px;
    }
    .quatation h4{
        font-size: 14px;
        margin-bottom: 20px;
        margin-top:3px;
    }
    .quatation img{
        width: 100%;
        height: 255px;
        border-radius: 4px;
    }
    #rightQutationPopup,
    #rightQutationPopup1,
    #videoQutationPopup{
        width: 300px;
        height: 450px;
        padding: 20px;
        display: none;
        position: absolute;
        top: 60%; left: 50%;
        border-radius: 4px;
        background-color: #fff;
        transform: translate(-50%, -50%);
        border: 2px solid #000;
    }
    #rightQutationPopup img{
        width: 100%;
        height: 100%;
    }
    #rightQutationPopup1 img{
        width: 100%;
        height: 100%;
    }
    #videoQutationPopup video{
        width: 100%;
        height: 100%;
    }
    #LeftQutationPopup,
    #bottomQutationPopup{
        width: 300px;
        height: 450px;
        padding: 20px;
        display: none;
        position: absolute;
        top: 60%; left: 50%;
        border-radius: 4px;
        background-color: #fff;
        transform: translate(-50%, -50%);
        border: 2px solid #000;
    }
    #LeftQutationPopup img{
        width: 100%;
        height: 100%;
    }
    #bottomQutationPopup img{
        width: 100%;
        height: 100%;
    }
    .Qutationclose{
        position: absolute;
        right: 3px; top: -7px;
        font-size: 25px;
        cursor: pointer;
    }
.articleHeading {
    margin-bottom:37px; 
    
}
.articleHeading span{
    width:4px;
    height: 25px; 
    background-color:#1772d4; 
    margin-right:10px;
}
    /** ========== Blog section styling ========== */
.articleHeading h1{
    margin-right:7px; 
    font-size:20px;
}
    .articleSection h1{
        font-size: 30px;
        margin: 0 -4px -23px;
    }
    .blogHeading h1{
        font-size: 20px;
    }
    .blogHeading1 p{
        padding: 10px 0;
        text-transform: capitalize;
    }
    .blogSection{
        padding: 20px;
    }
    .blogSection1{
        display: flex;
        flex-wrap: wrap;
        padding: 0 20px;
        margin-top: 30px;
        gap: 39px;
    }
    .blogImgandHeading{
        display: flex;
        flex-direction: column;
        
        /* flex-wrap: wrap; */
    }
    #clickedImg{
        position: relative;
        text-decoration: none;
    }
    .blogImg{
        /* width: 100%; */
        display: flex;
        /* flex-wrap: wrap; */
        /* height: 82vh; */
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }
    #clickedImg .blogImg h2{
        color: #000;
        font-size: 32px;
        position: absolute;
        bottom: 10px; left: 10px;
        background-color: antiquewhite;
    }
    .blogIcons{
        margin-top: 1px;
        background: none;
        justify-content: space-between;
        /*border-bottom: 3px solid #888;*/
    }
    .blogIcons i {
        font-size: 18px;
    }
    .blogIcons{
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        padding: 5px;
        background-color: lightgrey;
    }
    .blogIcons i{
        font-size: 25px;
    }
    .like-icon.red{
        color: red;
    }
    .comments-container div{
        margin: 10px 0 0;
    }
    .commented-comment{
        padding: 5px;
        margin: 5px 0;
        display: flex;
        flex-direction: column;
        gap: 10px;
        border-radius: 4px;
        /* border: 2px solid #888; */
    }
    .innerCommentFlex{
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .reCommentOnPost{
        display: flex;
        align-items: center;
        gap: 10px;
        margin-left: 50px;
    }
    .reCommentOnPost p{
        margin: 0;
        cursor: pointer;
    }
    .userProfileIcon i{
        width: 35px;
        height: 35px;
        color: #fff;
        display: flex;
        font-size: 20px;
        align-items: center;
        border-radius: 50px;
        justify-content: center;
        background-color: lightgray;
    }
    .innerPostedComment{
        padding: 5px 10px;
        border-radius: 20px;
        background-color: #f0f2f5;
    }
    .innerPostedComment p{
        margin: 0;
    }
    .innerReplyComment{
        width: 200px;
        padding: 5px 10px;
        margin-top: 10px;
        border-radius: 20px;
        background-color: lightgray;
    }
    .innerReplyComment p{
        margin: 0;
    }
    .comment-section{
        padding: 5px;
        display: none;
        margin-top: 10px;
        border-radius: 4px;
        /* background-color: #aaaaaa41; */
    }
    .commentInputWrapper{
        height: 35px;
        display: flex;
        border-radius: 50px;
        align-items: center;
        justify-content: center;
        background: #f1f1f1;
    }
    .comment-section input{
        width: 93%;
        outline: none;
        border: none;
        padding: 0 10px;
        background: transparent;
    }
    .commentInputWrapper i{
        font-size: 20px;
        cursor: pointer;
    }
    .replyInputOpenDiv{
        width: 300px;
        display: flex;
        border-radius: 50px;
        align-items: center;
        justify-content: space-between;
        background-color: lightgray;
    }
    .replyInputOpenDiv i{
        color: #000;
        cursor: pointer;
        background: transparent;
    }
    #replyInputOpenID{
        width: 250px;
        padding: 5px 10px;
        border-radius: 50px;
        background-color: #f0f2f5;
    }
    .modal{
        display: none;
        position: fixed;
        z-index: 1;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgb(0, 0, 0);
        background-color: rgba(0, 0, 0, 0.4);
        padding-top: 60px;
    }
    .Likemodal{
        display: none;
        position: fixed;
        z-index: 1;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgb(0, 0, 0);
        background-color: rgba(0, 0, 0, 0.4);
        padding-top: 60px;
    }
    .modal-content{
        background-color: #fefefe;
        margin: 5% auto;
        padding: 20px;
        border: 1px solid #888;
        width: 30%;
    }
    .Likemodal-content{
        background-color: red;
        margin: 5% auto;
        padding: 20px;
        border: 1px solid #888;
        width: 90%;
    }
    .modal-content ul{
        display: flex;
        align-items: center;
        gap: 14px;
        margin: 10px;
    }
    .modal-content ul li{
        list-style: none;
    }
    .modal-content ul li a{
        text-decoration: none;
    }
    .modal-content ul li i{
        font-size: 40px;
    }
    .modal-content #whatsapp{
        color: #25D366;
    }
    .modal-content #facebook{
        color: #4267B2;
    }
    .modal-content #telegram{
        color: #0088CC;
    }
    .close{
        color: #aaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
    }
    .Likeclose{
        color: #aaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
    }
    .close:hover,
    .close:focus{
        color: black;
        text-decoration: none;
        cursor: pointer;
    }
    .Likeclose:hover,
    .Likeclose:focus{
        color: black;
        text-decoration: none;
        cursor: pointer;
    }
    .seeMore{
        display: flex;
        align-items: end;
        justify-content: end;
        padding: 0 20px;
        margin: 20px 0;
            border-bottom: 2px solid #888;
    margin: 17px;
    }
    .seeMore a{
        width: 120px;
        padding: 10px;
        color: #013F5E;
        text-align: center;
        border-radius: 6px;
        text-decoration: none;
    }

    /** ========== Blog Page Section Styling ========== */

    .blogPage{
        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    }
    #blogPageSection{
        display: flex;
        align-items: center;
        flex-wrap: wrap;
       
        
    }
    #blogPage{
        margin: 20px 0;
    }
     .blogPage .blogsImg a img {
        width: 35vw;
        height: 35vh;
    }
    .blogPage .blogHeading{
        margin: 0;
        padding: 0 10px;
    }
    .blogPage .blogHeading h3{
        font-size: 16px;
    }

    /** ========== Article Section Styling ========== */

    .articleSection{
        direction: rtl;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 20px;
        flex-wrap: wrap;
        /* max-width: 800px; */
    }

    .articleImagePlusContent{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 100%;
        padding: 20px;
        max-width: 600px;
    }

    .articleImage{
        width: 100%;
    }
    .articleImage img{
        width: 100%;
    }
    .articleContent{
        width: 100%;
        margin-top: 10px;
    }
    .urduContent{
        display: inline;
    }
    .urduInitialContent{
        text-align: right;
    }
  .urduInitialContent h4 {
    display: inline;
    font-size: 16px;
    font-weight: 400;
}
  
    .urduRemainngContent h4{
        text-align: right;
    }

    /** ========== Article Page Styling ========== */

    .articlePageStyling{
        display: flex;
        align-items: center;
        flex-wrap: wrap;
    }
    .articlePagePreview{
        width: 49%;
    }
    .articlePagePreviewImg a img{
        width: 100%;
        height: 400px;
    }

    /** ========== Partner Section Styling ========== */

    .partnerSection{
        height: 17vh;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column ;
        gap: 20px;
    }
    .partnerSection h1{
        margin-bottom: -32px;

    }
    .partnerSectionImages .line{
        height: 110px;
        border-right: 2px solid #888;
    }
    .swiper{
        width: 70%;
        height: 100%;
    }
    .swiper-slide{
        text-align: center;
        font-size: 18px;
        background: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .swiper-slide img{
        display: block;
        width: 100%;
        height: 250px;
        object-fit: cover;
    }

    /** ========== Footer Styling ========== */

    footer{
        height: 49vh;
        /*background: url(Images/footer\ picture.png);*/
        background-size: cover;
    }
    .footerLinks{
        padding: 20px 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 40px;
    }
    .footerLinks p{
        font-size: 20px;
    }
    .appStores{
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .appStores img{
        width: 100px;
        height: 40px;
    }
    .footerIcons{
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 20px;
        margin: 30px 20px 20px;
    }
    .footerIcons i{
        width: 40px;
        height: 40px;
        font-weight: bold;
        border-radius: 50px;
        background-color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .footerView{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 20px;
        margin-top: 70px;
    }

    /** ==========  Media Qurie Start ========== */

@media (min-width:300px) and (max-width:320px){
    .mainNavbar{
        background: url(public/header.png);
        background-color: #f6f6f6;
        background-size: contain;
        background-repeat: no-repeat;
        position: relative;
        
    }
    
        .nav-link{
        color: #494949;
    }

    .navbar-text-aligemt{
        /* font-size: 12px;  */
        opacity: 0.5; 
        /* background-color: white; */
    }
    
    .navbar-text-aligemt p{
        
        display: none;
        font-size: 10px;
         font-weight: bolder;
          margin-left: -30px;

    }


    .navbarHeading{
        text-align: center;
    }
    .navbarHeading h1{
        font-size: 20px;
    }
    .nav-branding img{
        position: absolute;
        top: 40px;
        width: 63px;
    }
    .disableIcon{
        display: none;
    }
    .navbarHeading h1{
        color: #000;
        /* text-shadow: 1px 1px 1px rgba(191, 143, 42, 1); */
    }
    .search{
        position: absolute;
        left: 50%; 
        transform: translateX(-50%);
    }
    .hamPlusIcon{
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .hamPlusIcon i{
        font-size: 20px;
    }
    .hamburger{
        display: block;
        position: absolute;
        top: 10px; right: 20px;
    }
    .hamburger.active .bar:nth-child(2){
        opacity: 0;
    }
    .hamburger.active .bar:nth-child(1){
        transform: translateY(8px) rotate(45deg);
    }
    .hamburger.active .bar:nth-child(3){
        transform: translateY(-8px) rotate(-45deg);
    }
    .nav-menu{
position: absolute;
        left: -100%;
        top: 107px;
        gap: 0;
        justify-content: start;
        flex-direction: column;
        background-color: #fff;
        width: 40%;
        height: 249px;
        text-align: center;
        align-items: flex-start;
        transition: 0.3s;
        z-index: 10;
    }
    .nav-item{
        margin: 12px 0;
    }
    .nav-menu.active{
        left: 0;
    }

    /*? carousel styling  */

    .bootstrapCarousel{
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }
     .carousel-item .content{
        height: 143px;
    }
    .carousel-item .content h1{
        font-size: 18px;
    }
    .carousel-item .content p{
        width: 70%;
    }
    
    .search-box{
        margin-left:5px;
        width: 100px;
        /* margin-top: 9px; */
}

    /*? shadow boxes styling */

    .shadowBoxes{
        gap: 20px;
       
    }
    .boxPlusTriangle .shadowBox{
        width: 70px;
        height: 70px;
    }
    .boxPlusTriangle .shadowBox i{
        font-size: 20px;
    }
    .boxPlusTriangle .shadowBox h2{
        padding: 0px 0 0;
        font-size: 14px;
    }
    .boxPlusTriangle .triangle{
        width: 20px;
        height: 20px;
        right: -20px;
    }

    /*? Services styling */

    .headingPlusSoon{
        margin: 0;
    }
    .services{
        padding: 10px;
    }
    .serviceBox{
        width: 48%;
        height: 101px;
    }
    .serviceBox img{
        width: 40px;
        height: 40px;
    }
    .serviceBox h4{
        font-size: 14px;
    }

    /*? Demographic styling  */

    .currentHeading{
        padding-left: 5px;
        font-size: 20px;
    }
    .demographic{
        width: 96%;
        height: 35vh;
        margin: 10px;
        padding: 10px;
    }
    .demographic h2{
        bottom: 40px;
        font-size: 37px;
        font-weight: lighter;
    }
    .demographic p {
        bottom: 5px;
        font-size: 23px;
        font-weight: bolder;
    }

    /*? three circle styling  */

    .threeCircles{
        gap: 10px;
        height: 30vh;
    }
    .triCircle{
        width: 80px;
        height: 80px;
    }
    .triCircle img{
        width: 20px;
        height: 20px;
    }
    .triCircle h3{
        margin: 3px;
        font-size: 10px;
    }
    .triCircle p{
        font-size: 10px;
    }
    .circleDesign img{
        height: 87px;
        position: absolute;
        top: 50%; left: 50%;
        transform: translate(-50%, -50%);
    }

    /*? Quotation styling */

    .quoteSection{
        margin: 10px;
    }
    .quatation img{
        width: 100%;
        height: 150px;
    }
    .quatationPage img{
        width: 100%;
        height: 150px;
    }
    .quatation h4 {
        font-size: 11px;
        font-weight: 400;
        font-family: sans-serif;
               margin-top:3px;
    }
    .quatationPage{
        width: 47%;
    }
    .quatationPage video{
        width: 100%;
    }
    #rightQutationPopup,
    #rightQutationPopup1,
    #LeftQutationPopup,
    #bottomQutationPopup,
    #videoQutationPopup{
        width: 300px;
        height: 400px;
        border: 1px solid #000;
    }
    #rightQutationPopup img{
        width: 100%;
        height: 100%;
    }
    #rightQutationPopup1 img{
        width: 100%;
        height: 100%;
    }
    #rightQutationPopup video{
        width: 100%;
        height: 100%;
    }

    /*? Blog Styling */

    .blogImgandHeading{
        gap: 10px;
        align-items: center;
        flex-direction: row;
    }
    .blogSection{
        padding: 0 10px;
    }
    .blogImg{
        width: 300px;
        height: 150px;
    }
    #clickedImg .blogImg h2{
        font-size: 16px;
    }
    .blogHeading{
        padding: 0;
    }
    .blogHeading h3{
        font-size: 12.5px;
    }
    .blogIcons{
        margin-top: 1px;
        background: none;
        justify-content: space-between;
        /*border-bottom: 3px solid #888;*/
    }
    .blogIcons i {
        font-size: 18px;
    }
    .comment-section button {
        width: 100px;
        font-size: 10px;
    }
    .comment-section input{
        width: 88%;
    }
    .commented-comment i{
        height: 25px;
        width: 25px;
        font-size: 14px;
    }
    .innerPostedComment span,
    p{
        font-size: 13px;
    }
    .reCommentOnPost{
        margin-left: 40px;
    }
    .reCommentOnPost p{
        margin: 0;
    }
    .replyInputOpenDiv i{
        font-size: 14px;
        height: 12px;
    }
    .replyInputOpenDiv{
        width: 230px;
        background-color: #f0f2f5;
    }
    #replyInputOpenID{
        width: 180px;
    }
    .seeMore a {
        width: 94px;
        font-size: 12px;
        padding: 7px;
        margin-top: -40px;
        font-weight: bold;
        margin-right: -18px;
        margin-bottom: 13px;
    }
    .seeMore{
    margin: 13px;
    }
    .modal-content{
        width: 90%;
    }

    /*? blog page styling */

    .blogPage{
        display: flex;
        align-items: center;
        flex-direction: column;
        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    }
    #blogPage{
        margin: 20px 0;
    }
    .blogPage .blogsImg a img {
        width: 300px;
        height: 150px;
        margin: 0;
    }
    .blogPage .blogHeading{
        margin: 0;
    }
    .blogPage .blogHeading h3{
        font-size: 11px;
    }

    /*? article styling */

    .articleHeading{
        padding-left: 10px;
    }
    .articleSection{
        flex-wrap: wrap;
        gap: 0;
    }
    .articleImagePlusContent{
        padding: 10px;
    }

    /*? article page styling */

    .articlePageStyling{
        display: flex;
        align-items: center;
        flex-wrap: wrap;
    }
    .articlePagePreview{
        width: 100%;
    }
    .articlePagePreviewImg a img{
        width: 100%;
        height: 200px;
    }

    /*? partner styling */

    .partnerSection {
        height: 21vh;
    }
    .partnerSection h1{
        font-size: 20px;
    }
    .swiper{
        width: 95%;
        height: 100%;
    }
    .swiper-slide{
        text-align: center;
        font-size: 18px;
        background: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .swiper-slide img{
        display: block;
        width: 100px;
        height: 100px;
        object-fit: cover;
    }

    /*? footer styling */

    footer{
        height: 60vh;
    }
    .footerLinks{
        gap: 10px;
    }
    .footerLinks p{
        font-size: 12px;
    }
    .footerIcons{
        gap: 5px;
    }
    .footerIcons i{
        height: 32px;
        width: 32px;
        font-size: 17px;
    }
}
@media (min-width:321px) and (max-width:413px){
    .mainNavbar{
        background: url(Images/syedshayan2.jpg);
        background-color: white;
        background-size: contain;
        /* background-position: center center; */
        background-repeat: no-repeat;
        position: relative;
    }
    
        .nav-link{
        color: #494949;
    }

    .navbar-text-aligemt{
        font-size: 14px; 
        /* opacity: 0.5; 
        background-color: white; */
    }
    
    .navbar-text-aligemt p{
        font-size: 11px;
        margin-top: -29px;
        font-weight: bolder;
        color: black;
        margin-left: -168px;
    }


    .navbarHeading{
        text-align: center;
    }
    .navbarHeading h1{
        font-size: 20px;
    }
    .nav-branding img{
        position: absolute;
        top: 10px;
        margin-left: 78%;
        width: 51px;
    }
    .disableIcon{
        display: none;
    }
    .navbarHeading h1{
        color: #000;
        /* text-shadow: 1px 1px 1px rgba(191, 143, 42, 1); */
    }
    .search{
position: absolute;
        left: 77%;
        margin-top: 101px;
        transform: translateX(-50%);
        background-color: white;
    }
    .hamPlusIcon{
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .hamPlusIcon i{
        font-size: 20px;
    }

    .hamburger{
        display: block;
        position: absolute;
        top: 10px; right: 20px;
    }
    .hamburger.active .bar:nth-child(2){
        opacity: 0;
    }
    .hamburger.active .bar:nth-child(1){
        transform: translateY(8px) rotate(45deg);
    }
    .hamburger.active .bar:nth-child(3){
        transform: translateY(-8px) rotate(-45deg);
    }
    .nav-menu{
        position: absolute;
        left: -100%;
        top: 107px;
        gap: 0;
        justify-content: start;
        flex-direction: column;
        background-color: #fff;
        width: 40%;
        height: 250px;
        text-align: center;
                align-items: flex-start;
        transition: 0.3s;   
        z-index: 10;
    }
    .nav-item{
        margin: 12px 0;
    }
    .nav-menu.active{
        left: 0;
    }
        .search-box{
            margin-left:5px;
            width: 127px;
            /* margin-top: 9px; */
}
.headingPlusSoon span{
  
    height: 28px;
    margin-left:0px;

}
    .bootstrapCarousel{
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }
    .carousel-item .content{
        height: 137px;
    }
    .carousel-item .content h1{
        font-size: 18px;
    }
    .carousel-item .content p{
        width: 85%;
    }

    /*? shadow boxes styling */

    .shadowBoxes{
        gap: 15px;
       
    }
    .boxPlusTriangle .shadowBox{
        width: 70px;
        height: 70px;
    }
    .boxPlusTriangle .shadowBox i{
        font-size: 15px;
    }
    .boxPlusTriangle .shadowBox h2{
        padding: 0px 0 0;
        font-size: 10px;
    }
    .boxPlusTriangle .triangle{
        width: 15px;
        height: 15px;
        right: -15px;
    }
    

    

    /*? Services styling */

    .headingPlusSoon{
        margin: 0;
    }
    .services{
        padding: 10px;
    }
    .serviceBox{
        width: 48%;
        height: 101px;
    }
    .serviceBox img{
        width: 40px;
        height: 40px;
    }
    .serviceBox h4{
        font-size: 14px;
    }

    /*? Demographic styling  */

    .currentHeading{
        font-size: 20px;
        padding-left: 5px;
    }
    .demographic{
        width: 94%;
        height: 25vh;
        margin: 10px;
        padding: 10px;
    }
    .demographic h2{
        bottom: 40px;
        font-size: 37px;
        font-weight: lighter;
    }
    .demographic p {
        bottom: 5px;
        font-size: 25px;
        font-weight: bold;
    }

    /*? three circle styling  */

    .threeCircles{
        gap: 10px;
        height: 30vh;
    }
    .triCircle{
        width: 100px;
        height: 100px;
    }
    .triCircle img{
        width: 20px;
        height: 20px;
    }
    .triCircle h3{
        margin: 3px;
        font-size: 10px;
    }
    .triCircle p{
        font-size: 10px;
    }
    .circleDesign img{
        height: 106px;
        position: absolute;
        top: 50%; left: 50%;
        transform: translate(-50%, -50%);
    }

    /*? Quotation styling */

    .quoteSection{
        margin: 10px;
    }
    .quatation img{
        width: 100%;
        height: 150px;
    }
    .quatationPage img{
        width: 100%;
        height: 150px;
    }
    .quatation h4 {
        font-size: 11px;
        font-weight: 400;
        font-family: sans-serif;
               margin-top:3px;
    }
    .quatationPage{
        width: 47%;
    }
    .quatationPage video{
               width: 100%;
        height: 150px;
    }
    #rightQutationPopup,
    #rightQutationPopup1,
    #LeftQutationPopup,
    #bottomQutationPopup,
    #videoQutationPopup{
        width: 300px;
        height: 400px;
        border: 1px solid #000;
    }
    #rightQutationPopup img{
        width: 100%;
        height: 100%;
    }
    #rightQutationPopup1 img{
        width: 100%;
        height: 100%;
    }
    #rightQutationPopup video{
        width: 100%;
        height: 100%;
    }

    /*? Blog Styling */

    .blogImgandHeading{
        gap: 10px;
        align-items: center;
        flex-direction: row;
    }
    .blogSection{
        padding: 0 10px;
    }
    .blogImg{
         width: 311px;
        height: 174px;
    }
    #clickedImg .blogImg h2{
        font-size: 21px;
    }
    .blogHeading{
        padding: 0;
    }
    .blogHeading h3{
        font-size: 12.5px;
    }
    .blogIcons{
        margin-top: 1px;
        background: none;
        justify-content: space-between;
        /*border-bottom: 3px solid #888;*/
    }
    .blogIcons i {
        font-size: 18px;
    }
    .comment-section button {
        width: 100px;
        font-size: 10px;
    }
    .comment-section input{
        width: 88%;
    }
    .commented-comment i{
        height: 25px;
        width: 25px;
        font-size: 14px;
    }
    .innerPostedComment span,
    p{
        font-size: 15px;
    }
    .reCommentOnPost{
        margin-left: 40px;
    }
    .reCommentOnPost p{
        margin: 0;
    }
    .replyInputOpenDiv{
        width: 230px;
        background-color: #f0f2f5;
    }
    .replyInputOpenDiv i{
        font-size: 14px;
        height: 12px;
    }
    #replyInputOpenID{
        width: 180px;
    }
    .seeMore a {
        width: 114px;
        font-weight: 600;
        font-size: 12px;
        margin-top: -30px;
        margin-right: -31px;
        margin-bottom: 8px;
    }
    .modal-content{
        width: 90%;
    }

    /*? blog page styling */

    .blogPage{
        display: flex;
        align-items: center;
        flex-direction: column;
        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    }
    #blogPage{
        margin: 20px 0;
    }
    .blogPage .blogsImg a img {
        width: 335px;
        height: 170px;
    }
    .blogPage .blogHeading{
        margin: 0;
    }
    .blogPage .blogHeading h3{
        font-size: 11px;
    }

    /*? article styling */

    .articleHeading{
        padding-left: 10px;
    }
    .articleSection{
        flex-wrap: wrap;
        gap: 0;
    }
    .articleImagePlusContent{
        padding: 10px;
    }

    /*? article page styling */

    .articlePageStyling{
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        
    }
    .articlePagePreview{
        width: 100%;
    }
    .articlePagePreviewImg a img{
        width: 100%;
        height: 200px;
    }

    /*? partner styling */

    .partnerSection {
        height: 16vh;
    }
    .partnerSection h1{
        font-size: 20px;
    }
    .swiper{
        width: 65%;
        height: 100%;
    }
    .swiper-slide{
        text-align: center;
        font-size: 18px;
        background: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .swiper-slide img{
        display: block;
        width: 120px;
        height: 100px;
        object-fit: cover;
    }
    
        .appStores img{
        /* width: 100px; */
        width: 33%;
    }

    /*? footer styling */

    footer{
        height: 41vh;
    }
    .footerLinks{
        gap: 15px;
    }
    .footerLinks p{
        font-size: 14px;
    }
    .footerIcons{
        gap: 5px;
    }
    .footerIcons i{
        height: 33px;
        width: 33px;
        font-size: 17px;
    }
}
@media (min-width:375px) and (max-width: 376px){
        .blogPage .blogsImg a img {
        width: 316px;
        height: 150px;
    }
    footer{
        height: max-content;
    }
}
@media (min-width:390px) and (max-width: 391px){

    .mainNavbar{
        background: url(Images/syedshayan2.jpg);
        background-color: white;
        background-size: contain;
        /* background-position: center center; */
        background-repeat: no-repeat;
        position: relative;
    }
    
        .nav-link{
        color: #494949;
    }

    .nav-branding img {
        position: absolute;
        top: 13px;
        margin-left: 309px;
        width: 52px;
    
    }


    .navbar-text-aligemt{
        /* font-size: 12px;  */
        /* opacity: 0.5;  */
        background-color: transparent;
    }
    
    .navbar-text-aligemt p{
        font-size: 14px;
        margin-top: -37px;
        font-weight: bolder;
        color: black;
        margin-left: -191px;
    }



    .boxDesign{
        height: 63vh;
    }
    .boxDesign .rightBox{
        height: 24.3%;
    }
    .demographic{
        height: 25vh;
    }
    .search-box{
        margin-left:7px;
        width: 120px;
        font-size: 15px;
        /* margin-top: 9px; */
}
    .demographic p {
        bottom: 5px;
        font-size: 27px;
        font-weight: bold;
    }
    
    .threeCircles{
        height: 20vh;
    }

    .blogSection{
        padding: 0 10px;
    }

    .blogImg{
         width: 360px;
        height: 202px;
    }

       .blogPage .blogsImg a img {
        width: 336px;
        height: 170px;
    }

    #clickedImg .blogImg h2{
        font-size: 19px;
    }

    .partnerSection {
        height: 16vh;
    }
    
        .appStores img{
        /* width: 100px; */
        width: 33%;
    }

    footer{
        height: 40vh;
    }

}
@media (min-width:414px) and (max-width: 415px){
    .mainNavbar{
        background: url(Images/syedshayan2.jpg);
        background-color: white;
        background-size: contain;
        /* background-position: center center; */
        background-repeat: no-repeat;
        position: relative;
    }
    .nav-link{
        color: #494949;
    }

    .navbar-text-aligemt{
        font-size: 12px; 
        /* opacity: 0.5;  */
        /* background-color: white; */
    }
    
    .navbar-text-aligemt p{
        font-size: 12px;
         font-weight: bolder;
          margin-left: -30px;
    }



    .navbarHeading{
        text-align: center;
    }
    .navbarHeading h1{
        font-size: 20px;
    }
    .nav-branding img{
        position: absolute;
        top: 14px;
        margin-left: 319px;
        width: 63px;
    }
    .disableIcon{
        display: none;
    }
    .navbarHeading h1{
        color: #000;
        /* text-shadow: 1px 1px 1px rgba(191, 143, 42, 1); */
    }
    .search{
        margin-top: 105px;
        position: absolute;
        left: 70%;
        transform: translateX(-50%);
    }
    .hamPlusIcon{
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .hamPlusIcon i{
        font-size: 20px;
    }
    .hamburger{
        display: block;
        position: absolute;
        top: 10px; right: 20px;
    }
     .logo{
        max-width:58%;
    }
    .hamburger.active .bar:nth-child(2){
        opacity: 0;
    }
    .hamburger.active .bar:nth-child(1){
        transform: translateY(8px) rotate(45deg);
    }
    .hamburger.active .bar:nth-child(3){
        transform: translateY(-8px) rotate(-45deg);
    }
    .nav-menu{
        position: absolute;
        left: -100%;
        top: 108px;
        gap: 0;
        justify-content: start;
        flex-direction: column;
        background-color: #fff;
        width: 50%;
        height: 250px;
        text-align: center;
        transition: 0.3s;   
        z-index: 10;
    }
    .nav-item{
        margin: 12px 0;
    }
    .nav-menu.active{
        left: 0;
    }
    
    /*? carousel styling */
    
    .carousel-item .content{
        height: 146px;
    }
    .carousel-item .content h1{
        font-size: 22px;
    }

    /*? signup styling */

    .realEstateSignup{
        margin: 30px;
        height: 20vh;
        text-align: center;
    }
    .realEstateSignup h2{
        font-size: 27px;
    }
    .realEstateSignup input{
        width: 180px;
        height: 30px;
    }
    .realEstateSignup button{
        width: 60px;
        height: 30px;
        padding: 8px;
        font-size: 12px;
    }

    /*? shadow boxes styling */

    .shadowBoxes{
        gap: 30px;
      
    }
    .boxPlusTriangle .shadowBox{
        width: 90px;
        height: 90px;
    }
    .boxPlusTriangle .shadowBox i{
        font-size: 20px;
    }
    .boxPlusTriangle .shadowBox h2{
        padding: 0px 0 0;
        font-size: 14px;
    }
    .boxPlusTriangle .triangle{
        width: 20px;
        height: 20px;
        right: -20px;
    }

    /*? Services styling */

    .headingPlusSoon{
        margin: 0;
    }
    .services{
        padding: 10px;
    }
    .serviceBox{
        width: 48%;
        height: 101px;
    }
    .serviceBox img{
        width: 40px;
        height: 40px;
    }
    .serviceBox h4{
        font-size: 14px;
    }


    /*? Demographic styling  */

    .currentHeading{
        padding-left: 5px;
    }
    .demographic{
        width: 96%;
        height: 25vh;
        margin: 10px;
        padding: 10px;
    }
    .demographic h2{
        bottom: 40px;
        font-size: 37px;
        font-weight: lighter;
    }
    .demographic p {
        bottom: 5px;
        font-size: 30px;
        font-weight: 700;
    }

    /*? three circle styling  */

    .threeCircles{
        gap: 10px;
        height: 22vh;
    }
    .triCircle{
        width: 100px;
        height: 100px;
    }
    .triCircle img{
        width: 20px;
        height: 20px;
    }
    .triCircle h3{
        margin: 3px;
        font-size: 10px;
    }
    .triCircle p{
        font-size: 10px;
    }
    .circleDesign img{
        height: 107px;
        position: absolute;
        top: 50%; left: 50%;
        transform: translate(-50%, -50%);
    }

    /*? Quotation styling */

    .quoteSection{
        margin: 10px;
    }
    .quatation img{
        width: 100%;
        height: 150px;
    }
    .quatationPage img{
        width: 100%;
        height: 150px;
    }
    .quatation h4 {
        font-size: 11px;
        font-weight: 400;
               margin-top:7px;
        font-family: sans-serif;
    }
    .quatationPage{
        width: 47%;
    }
    .quatationPage video{
        width: 100%;
    }
    #rightQutationPopup,
    #rightQutationPopup1,
    #LeftQutationPopup,
    #bottomQutationPopup,
    #videoQutationPopup{
        width: 300px;
        height: 400px;
        border: 1px solid #000;
    }
    #rightQutationPopup img{
        width: 100%;
        height: 100%;
    }
    #rightQutationPopup1 img{
        width: 100%;
        height: 100%;
    }
    #rightQutationPopup video{
        width: 100%;
        height: 100%;
    }

    /*? Blog Styling */

    .blogHeading{
        padding: 0;
    }
    .blogImgandHeading{
        gap: 10px;
        align-items: center;
        flex-direction: row;
    }
    .blogSection{
        padding: 0 10px;
    }
    .blogImg{
        width: 395px;
        height: 200px;
    }
    #clickedImg .blogImg h2{
        font-size: 21px;
    }
    .blogHeading h3{
        font-size: 15px;
    }
    .blogIcons{
        background: none;
        justify-content: space-between;
        /*border-bottom: 1px solid #888;*/
    }
    .blogIcons i {
        font-size: 18px;
    }
    .comment-section button {
        width: 100px;
        font-size: 10px;
    }
    .comment-section input{
        width: 88%;
    }
    .commented-comment i{
        height: 25px;
        width: 25px;
        font-size: 14px;
    }
    .innerPostedComment span,
    p{
        font-size: 15px;
    }
    .reCommentOnPost{
        margin-left: 40px;
    }
    .reCommentOnPost p{
        margin: 0;
    }
    .replyInputOpenDiv{
        width: 230px;
        background-color: #f0f2f5;
    }
    .replyInputOpenDiv i{
        font-size: 14px;
        height: 12px;
    }
    #replyInputOpenID{
        width: 180px;
    }
    .seeMore a {
        width: 100px;
        font-size: 12px;
        padding: 10px;
        font-weight: bold;
        margin-top: -39px;
        margin-bottom: 10px;
        margin-right: -23px;
    }
    .modal-content{
        width: 90%;
    }

    /*? blog page styling */

    .blogPage{
        display: flex;
        align-items: center;
        flex-direction: column;
        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    }
    #blogPage{
        margin: 20px 0;
    }
       .blogPage .blogsImg a img {
        width: 347px;
        height: 184px;
    }
    .blogPage .blogHeading{
        margin: 0;
    }
    .blogPage .blogHeading h3{
        font-size: 11px;
    }

    /*? article styling */

    .articleHeading{
        padding-left: 10px;
    }
    .articleSection{
        flex-wrap: wrap;
        gap: 0;
    }
    .articleImagePlusContent{
        padding: 10px;
    }

    /*? article page styling */

    .articlePageStyling{
        display: flex;
        align-items: center;
        flex-wrap: wrap;
    }
    .articlePagePreview{
        width: 100%;
    }
    .articlePagePreviewImg a img{
        width: 100%;
        height: 200px;
    }

    /*? partner styling */

    .partnerSection{
        height: 24vh;
    }
    .partnerSection h1{
        font-size: 20px;
    }
    .swiper{
        width: 95%;
        height: 100%;
    }
    .swiper-slide{
        text-align: center;
        font-size: 18px;
        background: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .swiper-slide img{
        display: block;
        width: 130px;
        height: 100px;
        object-fit: cover;
    }
    
        .appStores img{
        /* width: 100px; */
        width: 33%;
    }
    
    /*? footer styling */

    footer{
        height: 40vh;
    }
    .footerLinks{
        gap: 15px;
    }
    .footerLinks p{
        font-size: 14px;
    }
    .footerIcons{
        gap: 5px;
    }
    .footerIcons i{
        height: 33px;
        width: 33px;
        font-size: 17px;
    }
}
@media (min-width:416px) and (max-width: 600px){
    .mainNavbar {
        background: url(Images/syedshayan2.jpg);
        background-color: white;
        background-size: contain;
        /* background-position: center center; */
        background-repeat: no-repeat;
        position: relative;
    }
    

    .nav-link{
        color: #494949;
    }



    .navbar-text-aligemt{
        /* font-size: 12px;  */
        /* opacity: 0.5;  */
        background-color: white;
        margin-left: -49px;
    }
    
    .navbar-text-aligemt p{
        font-size: 12px;
         font-weight: bolder;
          
    }



    .navbarHeading{
        text-align: center;
    }
    .navbarHeading h1{
        font-size: 20px;
    }
    .nav-branding img{
        position: absolute;
        top: 13px;
        left: 88%;
        width: 52px;
    }
     .logo{
        max-width:62%;
    }
    .disableIcon{
        display: none;
    }
    .navbarHeading h1{
        color: #000;
        /* text-shadow: 1px 1px 1px rgba(191, 143, 42, 1); */
    }


    .search{
        position: absolute;
        left: 82%;
        transform: translateX(-50%);
        background-color: white;
        margin-top: 99px;
    }

    .search-box {

        width: 128px;
    }

    .hamPlusIcon{
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .hamPlusIcon i{
        font-size: 20px;
    }
    .hamburger{
        display: block;
        position: absolute;
        top: 10px; right: 20px;
    }
    .hamburger.active .bar:nth-child(2){
        opacity: 0;
    }
    .hamburger.active .bar:nth-child(1){
        transform: translateY(8px) rotate(45deg);
    }
    .hamburger.active .bar:nth-child(3){
        transform: translateY(-8px) rotate(-45deg);
    }
    .nav-menu{
        position: absolute;
        left: -100%;
        top: 108px;
        gap: 0;
        justify-content: start;
        flex-direction: column;
        background-color: #fff;
        width: 50%; height: 252px;
        text-align: center;
        transition: 0.3s;   
        z-index: 10;
    }
    .nav-item{
        margin: 12px 0;
    }
    .nav-menu.active{
        left: 0;
    }

    /*? carousel styling  */

    .bootstrapCarousel{
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }
    .carousel-item .content{
        height: 146px;
    }
    .carousel-item .content h1{
        font-size: 24px;
    }
    .carousel-item .content p{
        width: 70%;
    }

    /*? shadow boxes styling */

    .shadowBoxes {
        gap: 23px;
       
    }
 .boxPlusTriangle .shadowBox {
        width: 113px;
        height: 104px;
    }
    .boxPlusTriangle .shadowBox i{
        font-size: 20px;
    }
    .boxPlusTriangle .shadowBox h2{
        padding: 10px 0 0;
        font-size: 14px;
    }
    .boxPlusTriangle .triangle{
        width: 30px;
        height: 30px;
        right: -30px;
    }

    /*? Services styling */

    .headingPlusSoon{
        margin: 0;
    }
   
    .services{
        padding: 10px;
    }
    .serviceBox{
        width: 48%;
        height: 101px;
    }
    .serviceBox img{
        width: 40px;
        height: 40px;
    }
    .serviceBox h4{
        font-size: 14px;
    }
    /*? Demographic styling  */

    .currentHeading{
        font-size: 20px;
        padding-left: 5px;
    }
     #blogPageSection{
      
       gap:11px;
        
    }
    .demographic {
       
        width: 95%;
        height: 25vh;
        margin: 8px;
        padding: 19px;
        top: 1px;
    }
    .demographic h2{
        bottom: 40px;
        font-size: 47px;
        font-weight: lighter;
    }
    .demographic p {
        bottom: 5px;
        font-size: 30px;
        font-weight: 700;
    }

    /*? three circle styling  */

      .threeCircles {
        gap: 24px;
        height: 22vh;
    }
      .triCircle {
        width: 116px;
        height: 116px;
    }
    .triCircle img{
        width: 20px;
        height: 20px;
    }
    .triCircle h3{
        margin: 3px;
        font-size: 10px;
    }
    .triCircle p{
        font-size: 10px;
    }
    .circleDesign img{
        height: 106px;
        position: absolute;
        top: 50%; left: 50%;
        transform: translate(-50%, -50%);
    }

    /*? Quotation styling */

    .quoteSection{
        margin: 10px;
    }
      .quatation img {
        width: 93%;
        height: 100%;
    }
    .quatation img {
        width: 100%;
        height: 200px;
    }

    
       .quatation h4 {
        font-size: 17px;
        font-weight: 400;
        font-family: sans-serif;
        margin-top: 3px;
    }
    .quatationPage{
        width: 47%;
    }
    .quatationPage video{
        width: 100%;
    }
    #rightQutationPopup,
    #rightQutationPopup1,
    #LeftQutationPopup,
    #bottomQutationPopup,
    #videoQutationPopup{
        width: 300px;
        height: 400px;
        border: 1px solid #000;
    }
    #rightQutationPopup img{
        width: 100%;
        height: 100%;
    }
    #rightQutationPopup1 img{
        width: 100%;
        height: 100%;
    }
    #rightQutationPopup video{
        width: 100%;
        height: 100%;
    }

    /*? Blog Styling */

    .blogHeading{
        margin: 0;
    }
    .blogImgandHeading{
        gap: 10px;
        align-items: center;
        flex-direction: row;
    }
    .blogSection{
        padding: 0 10px;
    }
    .blogImg{
        width: 405px;
        height: 250px;
    }
    #clickedImg .blogImg h2{
        font-size: 24px;
    }
    .blogHeading{
        padding: 0;
    }
    .blogHeading h3{
        font-size: 15px;
    }
    .blogIcons{
        background: none;
        justify-content: space-between;
        /*border-bottom: 3px solid #888;*/
    }
    .blogIcons i {
        font-size: 18px;
    }
    .comment-section button {
        width: 100px;
        font-size: 10px;
    }
    .comment-section input{
        width: 88%;
    }
    .commented-comment i{
        height: 25px;
        width: 25px;
        font-size: 14px;
    }
    .innerPostedComment span,
    p{
        font-size: 15px;
    }
    .reCommentOnPost{
        margin-left: 40px;
    }
    .reCommentOnPost p{
        margin: 0;
    }
    .replyInputOpenDiv{
        width: 230px;
        background-color: #f0f2f5;
    }
    .replyInputOpenDiv i{
        font-size: 14px;
        height: 12px;
    }
    #replyInputOpenID{
        width: 180px;
    }
    .seeMore a {
        width: 96px;
        font-size: 12px;
        padding: 9px;
        margin-top: -30px;
        font-weight: bold;
        margin-bottom: 8px;
        margin-right: -28px;
    }
    .modal-content{
        width: 90%;
    }

    /*? blog page styling */

    .blogPage{
        display: flex;
        align-items: center;
        flex-direction: column;
        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    }
    #blogPage{
        margin: 20px 0;
    }
        .blogPage .blogsImg a img {
        width: 365px;
        height: 208px;
    }
    .blogPage .blogHeading{
        margin: 0;
    }
    .blogPage .blogHeading h3{
        font-size: 11px;
    }

    /*? article styling */

    .articleHeading{
        padding-left: 10px;
    }
    .articleSection{
        flex-wrap: wrap;
        gap: 0;
    }
      .articleImagePlusContent {
        padding: 15px 80px;
    }

    /*? article page styling */

    .articlePageStyling{
        display: flex;
        align-items: center;
        flex-wrap: wrap;
    }
    .articlePagePreview{
        width: 100%;
    }
    .articlePagePreviewImg a img{
        width: 100%;
        height: 200px;
    }

    /*? partner styling */

    .partnerSection{
        height: 20vh;
    }
    .partnerSection h1{
        font-size: 20px;
    }
    .swiper{
        width: 95%;
        height: 100%;
    }
    .swiper-slide{
        text-align: center;
        font-size: 18px;
        background: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .swiper-slide img{
        display: block;
        width: 100%;
        height: 100px;
        object-fit: cover;
    }

    /*? footer styling */

    .footer{
        height: 39vh;
    }
    .footerLinks{
        gap: 20px;
    }
    .footerLinks p{
        font-size: 14px;
    }
    .footerIcons{
        gap: 5px;
    }
    .footerIcons i{
        height: 33px;
        width: 33px;
        font-size: 17px;
    }
}
@media (min-width:430px) and (max-width: 431px){
    .shadowBoxes{
        height: 15vh;
    }
     #blogPageSection{
      
       gap:11px;
        
    }
    .boxDesign{
        height: 58vh;
    }
    .blogSection{
        padding: 0 10px;
    }
    .blogImg{
        width: 410px;
        height: 230px;
    }
       .blogPage .blogsImg a img {
        width: 361px;
        height: 198px;
    }
    #clickedImg .blogImg h2{
        font-size: 22px;
    }
    .demographic{
        height: 25vh;
    }
     .logo{
        max-width:58%;
    }
    .demographic p {
        bottom: 5px;
        font-size: 30px;
        font-weight: 700;
    }
    .threeCircles{
        height: 20vh;
    }
    .partnerSection{
        height: 16vh;
    }
    footer{
        height: 38vh;
    }
}

@media (min-width:600px) and (max-width: 800px){
    .mainNavbar{
    background: url(public/CJNVJ.png);
    }

    .nav-link{
        color: #494949;
    }

}

@media (min-width:720px) and (max-width: 900px){
    .navbar-text-aligemt{
        /* font-size: 12px;  */
        /* opacity: 0.5;  */
        background-color: transparent;
        
    }
    
        .mainNavbar{
    background: url(public/CJNVJ.png);
    }

    
    .nav-link{
        color: #494949;
    }

    .navbar-text-aligemt p{
        font-size: 12px;
         font-weight: bolder;
         margin-left: -249px;
    }
}



@media (min-width:900px) and (max-width: 1100px){
    .navbar-text-aligemt{
        /* font-size: 12px;  */
        /* opacity: 0.5;  */
        background-color: transparent;
        
    }
        .mainNavbar{
    background: url(public/CJNVJ.png);
    }

    .nav-link{
        color: #494949;
    }

    
    .navbar-text-aligemt p{
        font-size: 12px;
         font-weight: bolder;
         margin-left: -450px;
          
    }
    .navbar-text-aligemt p {
        font-size: 13px;
        margin-top: 29px;
        font-weight: bolder;
        color: black;
        margin-left: -54px;
    }

    .search{
        position: absolute;
        right: -50px;
        transform: translateX(-50%);
        background-color: white;
        margin-top: 80px;
    }

    .search-box {

        width: 128px;
    }

}


@media (min-width:1100px) and (max-width: 1200px){
    .navbar-text-aligemt{
        /* font-size: 12px;  */
        /* opacity: 0.5;  */
        background-color: transparent;
        
    }
    
    .navbar-text-aligemt p{
        font-size: 12px;
         font-weight: bolder;
         margin-left: -600px;
    }
}












@media (min-width:969px) and (max-width:1024px){

    .navbar-text-aligemt{
        /* font-size: 12px;  */
        /* opacity: 0.5;  */
        background-color: transparent;
    }
    
        .mainNavbar{
    background: url(public/CJNVJ.png);
    }

    
    .navbar-text-aligemt p{
        font-size: 14px;
         font-weight: bolder;
          margin-left: -30px;
    }

        .shadowBoxes {
       
        gap: 35px;
    }
    .headingPlusSoon p{
   
    font-size:13px;
      
}
 #blogPageSection{
      
       gap:11px;
        
    }
.headingPlusSoon h1{
  
    font-size: 32px;
}
.headingPlusSoon span{
  
    height: 43px;
   
}
.carousel-item .content p {
    
    font-size: x-large;
}
         .blogPage .blogsImg a img {
        width: 47vw;
        height: 30vh;
    }
      .boxPlusTriangle .shadowBox {
        width: 185px;
        height: 150px;
    }
    .serviceBox{
        height: 130px;
    }
    .rightBox{
        height: 22%;
    }
    .demographic{
        height: 36vh;
        width:71%;
    }
       .demographic p {
        font-size: 38px;
        font-weight: 700;
    }
.quoteSection h1 {
    font-size: 32px;
  
}
.activehading span{
  
    height: 36px;
   
}
.quatation h4 {
  
    font-size: 20px;
    font-weight: 400;
}
.quatation img {
    width: 98%;
    height: 383px;
}
    .threeCircles{
        height: 36vh;
    }
    .blogImg{
        height: 40vh;
    }
    .articleHeading{
        padding-left: 10px;
    }
    .articleImagePlusContent{
        padding: 10px;
    }
      .blogHeading h1{
        font-size: 32px;
    }
    .blogHeading span{
    
    height:41px;

}
.articleHeading h1{
   
    font-size:32px;
}
.articleHeading span{
   
   height:45px;
}
.nav-branding img {

    margin-top: 16px;
}
    .partnerSection{
        height: 40vh;
    }
     .appStores img{
        width: 155px;
        height: 60px;
    }
    .logo{
        max-width:58%;
    }
    footer{
        height: 45vh;
    }
}
@media (min-width:1024px) and (max-width:1440px){
     .logo{
        max-width:32%;
    }
     #blogPageSection{
      
       gap:11px;
        
    }
    
    .nav-menu{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4rem;
    
       margin-left: 140px;
}

.articleSection {
    direction: rtl;
    display: flex
;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 20px;
    flex-wrap: wrap;
    margin-right: 20px;
    /* max-width: 800px; */
}

.urdu-artical-heading{
  margin-right: 32px;
}
    
    .blogPage .blogsImg a img {
    width: 47vw;
   
}
    .demographic{
        height:45vh;
        width:94vh;
    }
      .demographic p{
      font-size:51px;
    }
     .blogImg img{
         width:266%;
     }
}