@import url(https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700);
@import url(font/archivo.css);
@import url(font/font_family.css);

html {overflow-x: hidden;scroll-behavior: smooth;}
* {padding:0;margin:0;font-family:'poppins','Archivo';position:relative;transition:0.4s;box-sizing: border-box;}
body {background: #ffffff;
    overflow-x: hidden;
}
a {text-decoration:none;color:unset;}
div,h1,h2,h3,h4,p,i,a {position:relative;transition:0.4s;   
    }

:root {
	--color:#1284df;
	--color2:#021314;
	--color3:#ffffff;
	
}







::placeholder {font-style:italic;}

.header {        width: -webkit-fill-available;
    background: var(--color);
    color: white;
    display: grid;
    grid-template-columns: 14% 26% auto;
    align-items: center;
    overflow: visible;}
.header .head_cont{        vertical-align: middle;
    margin: 0 auto;
    width: -webkit-fill-available;
    text-align: center;
}
.header .head_cont .head_logo{}
.header .head_cont .head_logo img{      width: 70px;
    height: auto;
    border-radius: 100px;}
.header .head_cont .search_bar{           border: 1px solid white;
    background: white;
    border-radius: 6px;
    height: 35px;
    padding: 1px 8px 0px 5px;
    display: flex;
}
.header .head_cont .search_bar input{    background: transparent;
    padding: 6px;
    border: 0px;
    outline: none;
    width: auto;
    font-size: 15px;
}
.header .head_cont .search_bar button{       padding: 6px;
    font-size: 18px;
    border: 0px;
    vertical-align: middle;
    border-radius: 20px;
    outline: 1px solid white;
    background: #1284df;
    color: white;
    position: absolute;
    right: 0px;
}
.header .head_cont .head_text {    display: inline-block;
    padding: 17px 6px;
    font-size: 11px;
    cursor: pointer;
    vertical-align: middle;}
.header .head_cont .head_text h3{display: inline-block;
    font-weight: 400;
    margin: 0px 5px;}
.header .head_cont .head_text i {display: inline-block;
    background: #ffffff;
    color: var(--color);
    padding: 5px;
    width: 25px;
    border-radius: 23px;
    height: 24px;
    text-align: center;}


.goog-te-gadget .goog-te-combo {
         margin: 0px 0;
    padding: 6px;
    border: 0px solid #ffffff;
    background: #00000075;
    color: white;
    border-radius: 4px;
    font-size: 12px;
    display: inline-block;
    width: 138px;
}


.drop_down {       display: none;
    position: absolute;
    z-index: 7;
    background: white;
    color: #505050;
    box-shadow: -2px 29px 20px 0px #5656562e;
    top: 55px;
    border-radius: 5px;
    font-size: 13px;
    text-align: left;}
	
	.drop_down:before {
    content: '';
    position: absolute;
    border: 15px solid transparent;
    border-bottom: 15px solid white;
    top: -25px;
    left: 30;
}
.drop_down li{    list-style-type: none;
    width: 150px;
    padding: 15px 21px;}
.drop_down li:hover {background: #1284df;
    color: white;}
.head_text:hover .drop_down  {display:block;}
	
.hero {             color: white;
    padding: 0px;
    border-radius: 0px 0px 19px 20px;
    background-position: center;
    background-repeat: repeat-y;
    padding-top: 1px;
    width: 100%;
    background: #f0f0f0;}
.hero_text {display: inline-block;
    width: fit-content;
    padding: 62px;}
.hero_text h1{display: inline-block;
    margin: 10px;
    font-size: 48px;}
.hero_text h2  {display:inline-block}
.hero_text h3{}
.hero_text2 {              background: #ffffff;
    color: #000000;
    padding: 50px;
    border-radius: 4px;
    margin: 0;
    max-width: 100%;
    width: 100%;
    text-align: left;
    line-height: 1.5;
    align-items: center;
    z-index: 3;
    vertical-align: top;
    display: grid;
    grid-template-columns: 50% 50%;
    box-sizing: border-box;}
	
	
.ht_side2 img {          width: 100%;
   }	
	
.hero_text2 h1{             font-size: 32px;
    text-transform: capitalize;
    letter-spacing: 0;}
.hero_text2 p{         font-size: 15px;
    margin: 20px 0px;
    color: #000000;}

.mobile_header,.outside_click_close {display:none;}
.btn1 {         background: black;
    color: white;
    width: auto;
    border: 0px solid;
    padding: 11px 25px;
    border-radius: 0px;
    margin: 15px 5px 0px;
    display: inline-block;
    font-size: 15px;	}

.btn1:hover {
	
	    transform: scale(1.1);
    background: #1284df70;
    border-radius: 60px;
}

	.visitors_box {text-align: center;
    }
	.v_box {	
               padding: 27px;
    min-width: 300px;
    display: inline-block;
    margin: 25px 6px;
    border-radius: 3px;
    background: #ffffffe6;
    box-shadow: 0px 0px 20px 0px #ded8d863;
    color: black;
	
}
	.v_box:hover {
		transform: rotate(4deg);
		transition:0.3s;
	}
	.v_box h3 {          color: #115991;
    font-size: 23px;
    margin: 7px auto 6px;
    font-weight: 600;
    letter-spacing: -1px;}
	
	.v_box .visitors,.v_box .happy_cls {font-size: 50px;
    min-width: 87px;
    position: relative;
    margin: 0 auto;
    text-align: center;
    width: 100%;
    font-weight: 600;
    }
	.v_box .cards {    font-size: 50px;
   
    min-width: 87px;
    position: relative;
    margin: 0 auto;
    text-align: center;
    width: 100%;
    font-weight: 600;}
	
.city_change {
	display:none;
	position: fixed;
    border: 2px solid var(--color);
    padding: 36px;
    z-index: 30;
    background: white;
    border-radius: 6px;
    top: 18%;
    left: 50%;
    transform: translate(-50%);
    box-shadow: 0px 0px 10px 0px #6060606b;
}
.city_change h3{font-size: 43px;
    color: #f5665c;
    position: absolute;
    top: -2px;
    right: 13px;
    z-index: 3;}
.city_change form{margin: 20px;}
.city_change form select{padding: 10px;
    border: 2px solid var(--color);
    color: var(--color);
    border-radius: 4px;}
.city_change form input[type=submit]{font-size: 14px;
    padding: 12px;
    background: var(--color);
    border: 0px;
    border-radius: 5px;
    color: white;}
	
	


.slick-slide {
     margin: 26px 3px;
    padding: 0px 10px;
    text-align: center;
    box-shadow: 0px 0px 8px 0px #d7d6d669;
    border-radius: 8px;
}

    .slick-slide img {
      width: 100px;
    margin: 14px auto;
    height: 100px;
    border: 1px solid #d1d0d0;
    border-radius: 79px;
    overflow: hidden;

    }

    .slick-prev:before,
    .slick-next:before {
      color: black;
    }


    .slick-slide {
      transition: all ease-in-out .3s;
      opacity: .2;
    }
    
    .slick-active {
      opacity: 1;
    }

    .slick-current {
      opacity: 1;
    }
	
	
	
	
	
	.view_more_btn {font-size: 17px;
    background: #1284df;
    color: white;
    margin: -26px 34px;
    text-align: right;
    width: fit-content;
    float: right;
    padding: 12px;
    border-radius: 3px;}
	.cate_title {          margin: 43px auto 16px;
    text-transform: capitalize;
    color: black;
    width: fit-content;
    font-size: 20px;
    font-weight: 400;
}

.cate_title:before {
    content: '';
    position: absolute;
    width: 100px;
    height: 4px;
    background: #1284df	;
    bottom: -10px;
    left: 50%;
    transform: translate(-50%);
}
.row {}
	
	.title_sample {text-align:center;}
	
	footer {background: black;
    color: white;
    text-align: center;
    margin: 0px;
    padding: 20px;}
	
	/*cookies policy*/
	.cookies_policy {         position: fixed;
    bottom: 0;
    z-index: 44;
    background: #000000bf;
    width: 500px;
    margin: 0px auto;
    padding: 17px;
    color: white;
    border-radius: 5px;
    left: 50%;
    transform: translate(-50%);
    box-shadow: 0px 0px 10px 0px #00000091;
}
	.cookies_policy h3{text-align: center;
    color: #4caf50;}
	.cookies_policy p{font-size: 14px;
    margin: 9px;
   
}
	.close_cookies {color: #e51717;
    font-size: 44px;
    position: absolute;
    right: 10px;
    top: -5px;
    z-index: 4;}
	.accept_btn {        display: inline-block;
    background: #4caf50;
    color: white;
    padding: 7px 11px;
    font-size: 15px;
    margin: 0px 10px;cursor:pointer;}
	.close_btn {  display: inline-block;
    background: #595a59;
    color: white;
    padding: 7px 11px;
    font-size: 15px;
    margin: 0px 10px;cursor:pointer;}
	


.social_med_poster {       padding: 40px 10px;
    background: #0d3b5f;
    color: white;}
.social_med_poster h2{        font-size: 25px;
    text-align: center;
    padding: 27px;
  
    font-weight: 600;
    margin-bottom: 1px;}
	
	.social_med_poster p {       text-align: center;
    margin: 0px auto 30px;
    
    font-weight: 500;
    font-size: 14px;}
.social_med_poster h2:before {
    content: '';
    position: absolute;
    width: 100px;
    height: 5px;
    background: #1284df;
    bottom: 11px;
    left: 50%;
    transform: translate(-50%);
}

.social_med_poster_scroll {       display: grid;
    grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto;
    overflow-x: scroll;
    text-align: center;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;}
	
	.category_boxm {    width: 150px;
    display: inline-block;
    height: auto;
    margin: 3px;
    vertical-align: text-top;
    border-radius: 7px;
    overflow: hidden;
    cursor: pointer;}
	.category_boxm img{    width: 130px;
    height: 130px;
    border: 1px solid lightgrey;
    border-radius: 100px;}
	.category_boxm h3{    font-size: 14px;
    font-weight: 500;
    padding: 10px 2px;
    width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;}
	.category_boxm .btn23{    font-size: 13px;
    background: #2196F3;
    color: white;
    padding: 6px;}
	.category_boxm .btn23 i{}
	
.social_med_poster .poster_demo{      width: 300px;
    height: auto;
    display: inline-block;
    margin: 5px;}
.social_med_poster .poster_demo img{width:100%;}



/* width */
.social_med_poster_scroll::-webkit-scrollbar {
  width: 10px;height:10px
}

/* Track */
.social_med_poster_scroll::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
 
/* Handle */
.social_med_poster_scroll::-webkit-scrollbar-thumb {
      background: #1284df;
    border-radius: 10px;
}

/* Handle on hover */
.social_med_poster_scroll::-webkit-scrollbar-thumb:hover {
  background: #097bd6; 
}


.btn2 {         background: #1284df;
    color: white;
    padding: 8px 17px;
    font-weight: 400;
    margin: 0px auto 14px;
    width: fit-content;
    font-size: 14px;
    border-radius: 50px;}

	
	.btn2 i{color: white;}	
.feedback_box {            width: 150px;
    overflow: hidden;
    margin: 10px 4px;
    display: inline-grid;
    grid-template-rows: 150px auto auto auto auto;
    padding: 5px;
    border-radius: 5px;
    align-items: center;
    vertical-align: top;
    border: 1px solid #e9e9e9;}
.feedback_box img{       width: 130px;
    max-height: 130px;
    display: block;
    margin: 0 auto;
    border: 1px solid #c1c1c1;
    border-radius: 200px;}
.feedback_box h3{          font-weight: 500;
    text-transform: capitalize;
    margin: 6px 0px;
    font-size: 14px;
    height: auto;
    color: black;
    background: #f6f6f6;}
	
	.search_resl {    font-size: 14px;
    padding: 20px;
    font-weight: 500;}

.feedback_box i{color: #ffffff; }
	.feedback_box p{      margin: 3px 7px;
    font-size: 12px;
    text-align: justify;
    color: #000000;
    height: auto;
    font-weight: 500;
    overflow: hidden;}
	
	.pagination {       max-width: -webkit-fill-available;
    border: 0px solid;
    width: fit-content;
    min-width: 200px;
    margin: 8px auto;
    padding: 10px 12px;
    background: #f0f0f0;
    text-align: center;}
	.pagination .page_btn{       width: fit-content;
    min-width: 28px;
    text-align: center;
    background: #d8d8d8;
    border-radius: 31px;
    font-size: 16px;
    padding: 4px 13px;
    display: inline-block;
    vertical-align: middle;
    margin: 2px;}
	.pagination .active{    background: #2196F3;
    color: white;}
	
	/* Position the image container (needed to position the left and right arrows) */

.containerimgback 	 {}
.containerimg {
                     position: relative;
    width: fit-content;
    max-width: -webkit-fill-available;
    margin: 0 auto;
    overflow: hidden;
    overflow-x: scroll;
    display: block;
    grid-template-columns: auto auto auto auto auto;
    text-align: center;
}
.poster_img {    display: inline-block;}
.poster_img img{         width: 100px;
    margin: 6px;
    border-radius: 3px;
    box-shadow: 0px 0px 10px 0px #00000047;}


.promo {        height: 300px;
    text-align: center;
    overflow: hidden;}
.promo img {         width: auto;
    margin: 10px;
    border-radius: 8px;}
	
	.popup_offer {   display:none; position: fixed;
    top: 30px;
    background: white;
    z-index: 3;
    text-align: center;
    width: 70%;
    left: 50%;
    transform: translate(-50%);
    padding: 30px;
    box-shadow: 0px 0px 20px 0px #6a6a6a42;
    border-radius: 8px;}
	.popup_offer .close {    position: absolute;
    z-index: 3;
    color: #f87f7f;
    right: 22px;
    font-size: 46px;
    top: 9px;}
	.popup_offer i{    color: red;
    font-size: 39px;
    margin: 10px;}
	.popup_offer h3{    font-size: 14px;
    font-weight: 400;
    margin: 20px;}
	.popup_offer iframe{        width: 80%;
    height: 300px;
    margin: 10px;}


/* ============================================================
   HOMEPAGE DESIGN ENHANCEMENT v2 - LIGHT THEME
   Hero Section + Header Redesign
   ============================================================ */

/* ---- HEADER: Sticky White + Blue accent (DESKTOP ONLY) ---- */
@media screen and (min-width: 701px) {
    .header {
        position: sticky;
        top: 0;
        z-index: 999;
        background: #ffffff;
        box-shadow: 0 2px 24px rgba(18,132,223,0.10);
        border-bottom: 1.5px solid #eef3fb;
        padding: 0 10px;
    }

    /* Nav link text */
    .header .head_cont .head_text h3 {
        color: #2d3748;
        font-weight: 600;
        font-size: 14px;
        letter-spacing: 0.2px;
    }

    /* Hide circular icons on desktop nav */
    .header .head_cont .head_text > i {
        display: none !important;
    }

    /* Each nav item pill hover */
    .header .head_cont .head_text {
        padding: 8px 14px;
        border-radius: 8px;
        transition: background 0.2s, color 0.2s;
        position: relative;
    }

    .header .head_cont .head_text:hover {
        background: #f0f7ff;
        border-radius: 8px;
    }

    .header .head_cont .head_text:hover h3 {
        color: #1284df;
    }

    /* Login button — gradient pill CTA */
    .header .head_cont .login_btn {
        background: linear-gradient(135deg, #1284df, #7c3aed) !important;
        border-radius: 50px !important;
        padding: 7px 18px !important;
    }

    .header .head_cont .login_btn h3 {
        color: #ffffff !important;
        font-weight: 600 !important;
    }

    .header .head_cont .login_btn:hover {
        background: linear-gradient(135deg, #0a72cc, #6d28d9) !important;
        transform: translateY(-1px);
        box-shadow: 0 4px 14px rgba(18,132,223,0.35) !important;
    }

    /* Search bar */
    .header .head_cont .search_bar {
        border-radius: 50px;
        border: 1.5px solid #dde8f8;
        background: #f7fbff;
        transition: border-color 0.2s, box-shadow 0.2s;
    }

    .header .head_cont .search_bar:focus-within {
        border-color: #1284df;
        box-shadow: 0 0 0 3px rgba(18,132,223,0.12);
    }

    .header .head_cont .search_bar input {
        font-size: 14px;
        color: #2d3748;
    }

    .header .head_cont .search_bar button {
        border-radius: 50px;
        background: linear-gradient(135deg, #1284df, #7c3aed);
        color: #fff;
        outline: none;
        border: none;
        padding: 7px 14px;
        font-size: 14px;
    }

    /* Dropdown menu */
    .drop_down {
        background: #ffffff !important;
        border: 1.5px solid #eef3fb !important;
        border-radius: 12px !important;
        box-shadow: 0 8px 30px rgba(18,132,223,0.15) !important;
        padding: 6px 0 !important;
        min-width: 170px !important;
        top: 100% !important;
    }

    .drop_down li {
        padding: 10px 18px !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        color: #2d3748 !important;
        border-radius: 8px !important;
        margin: 2px 6px !important;
        width: auto !important;
        list-style: none !important;
        transition: background 0.2s !important;
    }

    .drop_down li:hover {
        background: #f0f7ff !important;
        color: #1284df !important;
    }
}

.mobile_header {
    background: linear-gradient(135deg, #1284df, #0a72cc) !important;
    box-shadow: 0 3px 15px rgba(18,132,223,0.3) !important;
}

/* ---- HERO: Soft Light Gradient ---- */
.hero {
    background: linear-gradient(150deg, #f0f9ff 0%, #e8f4fd 35%, #f3f0ff 70%, #fff5f0 100%) !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    position: relative !important;
    padding: 0 !important;
}

/* Decorative blob - top right */
.hero::before {
    content: '' !important;
    position: absolute !important;
    width: 500px !important;
    height: 500px !important;
    background: radial-gradient(circle, rgba(18,132,223,0.1) 0%, transparent 65%) !important;
    top: -100px !important;
    right: -80px !important;
    border-radius: 50% !important;
    animation: blobFloat 8s ease-in-out infinite !important;
    z-index: 0 !important;
}

/* Decorative blob - bottom left */
.hero::after {
    content: '' !important;
    position: absolute !important;
    width: 350px !important;
    height: 350px !important;
    background: radial-gradient(circle, rgba(124,58,237,0.08) 0%, transparent 65%) !important;
    bottom: -60px !important;
    left: 5% !important;
    border-radius: 50% !important;
    animation: blobFloat 11s ease-in-out infinite reverse !important;
    z-index: 0 !important;
}

@keyframes blobFloat {
    0%, 100% { transform: translateY(0) scale(1); }
    50%       { transform: translateY(-18px) scale(1.05); }
}

/* ---- HERO CARD ---- */
.hero_text2 {
    background: #ffffff !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border: none !important;
    border-top: 4px solid transparent !important;
    border-image: linear-gradient(90deg, #1284df, #7c3aed, #f59e0b) 1 !important;
    padding: 55px 80px !important;
    color: #1a1a2e !important;
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

/* Rainbow top bar */
.hero_text2::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important; left: 0 !important; right: 0 !important;
    height: 4px !important;
    background: linear-gradient(90deg, #1284df 0%, #7c3aed 50%, #f59e0b 100%) !important;
    border-radius: 0 !important;
}

.hero_text2 h1 {
    font-size: 38px !important;
    font-weight: 800 !important;
    color: #0f1a2e !important;
    line-height: 1.2 !important;
    letter-spacing: -0.5px !important;
    margin-bottom: 6px !important;
}

.hero_text2 p {
    color: #4a5568 !important;
    font-size: 15px !important;
    line-height: 1.8 !important;
    max-width: 480px !important;
}

/* ---- TRUST BADGES in hero ---- */
.hero_trust {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin: 18px 0 24px !important;
}

.hero_trust_item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: #f0f8ff !important;
    border: 1px solid #cce4f8 !important;
    color: #1284df !important;
    padding: 6px 14px !important;
    border-radius: 50px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
}

.hero_trust_item i {
    font-size: 11px !important;
    color: #1284df !important;
    background: transparent !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

/* ---- PHONE MOCKUP FLOAT ANIMATION ---- */
.ht_side2 {
    position: relative !important;
    text-align: center !important;
}

.ht_side2 img {
    animation: phoneFloat 4s ease-in-out infinite !important;
    filter: drop-shadow(0 20px 40px rgba(18,132,223,0.2)) !important;
    max-width: 85% !important;
}

@keyframes phoneFloat {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-12px); }
}

/* ---- BUTTONS ---- */
.btn1 {
    background: linear-gradient(135deg, #1284df, #0a72cc) !important;
    color: #ffffff !important;
    border-radius: 50px !important;
    padding: 13px 30px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border: none !important;
    box-shadow: 0 6px 20px rgba(18,132,223,0.3) !important;
    display: inline-block !important;
}

.btn1:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 30px rgba(18,132,223,0.42) !important;
    background: linear-gradient(135deg, #0a72cc, #1284df) !important;
    border-radius: 50px !important;
}

/* ---- STATS / VISITORS CARDS ---- */
.visitors_box {
    padding: 20px 0 30px !important;
    position: relative !important;
    z-index: 2 !important;
}

.v_box {
    background: #ffffff !important;
    border-radius: 18px !important;
    border-left: 5px solid #1284df !important;
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
    box-shadow: 0 8px 30px rgba(18,132,223,0.1) !important;
    color: #1a1a2e !important;
    padding: 26px 38px !important;
}

.v_box:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 16px 40px rgba(18,132,223,0.18) !important;
}

.v_box h3 {
    color: #6b7280 !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    margin-top: 6px !important;
}

.v_box .visitors, .v_box .cards {
    font-size: 50px !important;
    font-weight: 800 !important;
    background: linear-gradient(135deg, #1284df, #7c3aed) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* Stats box - 3 cards side by side */
.visitors_box {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 16px !important;
    padding: 24px 20px 36px !important;
}

.v_box {
    min-width: 200px !important;
    max-width: 240px !important;
    flex: 1 !important;
    text-align: center !important;
}

/* ============================================================
   END ENHANCEMENT v2
   ============================================================ */