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

@import url(font/archivo.css);
@import url(font/font_family.css);

html {
    
    scroll-behavior: smooth;

}

* {
    padding: 0;
    margin: 0;
    font-family: 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: #d68f0f;
    --color2: #021314;
    --color3: #ffffff;
}

::placeholder {
    font-style: italic;
}

.header {
    width: -webkit-fill-available;
    background: #783f04;
    color: white;
    display: grid;
    grid-template-columns: 14% 25% auto;
    align-items: center;
}

.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: 99px;
    height: auto;
    border-radius: 71px;
}

.header .head_cont .search_bar {
    border: 1px solid white;
    background: white;
    border-radius: 36px;
    height: 33px;
    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: #d68f0f;
    color: white;
    position: absolute;
    right: 0px;
}

.header .head_cont .head_text {
    display: inline-block;
    padding: 20px 10px;
    font-size: 12px;
    cursor: pointer;
}

.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;
}

.editable {}

.dgcardhero {
    background: var(--color);
    color: white;
    padding: 13px;
    border-radius: 1px 1px 3px 3px;
}

.dgcardhero_text {
    display: inline-block;
    width: fit-content;
    padding: 50px;
}

.dgcardhero_text h1 {
    display: inline-block;
    margin: 9px;
    font-size: 46px;
}

.dgcardhero_text h2 {
    display: inline-block
}

.dgcardhero_text h3 {}

.dgcardhero_text2 {
    background: white;
    display: inline-block;
    color: #302003;
    padding: 51px;
    border-radius: 23px;
    width: 50%;
    margin: 10px auto;
    text-align: center;
    line-height: 1.5;
    vertical-align: top;
}

.dgcardhero_text2 h1 {}

.dgcardhero_text2 p {}

.mobile_header,
.outside_click_close {
    display: none;
}

.dgbtn1 {
    background: var(--color);
    color: white;
    width: fit-content;
    padding: 10px 21px;
    border-radius: 6px;
    margin: 15px 12px 0px;
    display: inline-block;
}

.dgbtn1:hover {
    background: #f25a2d;
    transform: scale(1.1);
}

.dgcard_box {
    text-align: center;
}

.dg_box {
    padding: 27px;
    min-width: 200px;
    display: inline-block;
    margin: 30px 11px;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0px 0px 11px 11px #60606052;
}

.dg_box:hover {
    transform: rotate(4deg);
    transition: 0.3s;
}

.dg_box h3 {
    color: #7b7a7a;
    font-size: 23px;
    margin: 21px auto 6px;
    font-weight: 500;
    letter-spacing: -1px;
}

.dg_box .visitors,
.dg_box .happy_cls {
    font-size: 50px;
    min-width: 87px;
    position: relative;
    margin: 0 auto;
    text-align: center;
    width: 100%;
    font-weight: 600;
    color: #4caf50;
}

.dg_box .cards {
    font-size: 50px;
    color: #f44336;
    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;
}

/* bubbles */

.bubbles_dgcardhero {
    padding: 10px;
    position: absolute;
    bottom: 1px;
    width: -webkit-fill-available;
    left: 0;
    height: 98%;
    background: #00000000;
    z-index: 0;
    display: grid;
    grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto;
}

.bubble1,
.bubble2,
.bubble3,
.bubble4,
.bubble5 {
    width: 100px;
    height: 100px;
    background: radial-gradient(#ffffff70, #ee9e11);
    bottom: 0;
    border-radius: 5px;
    animation: bubble 5s linear infinite alternate;
}

@keyframes bubble {
    from {
        top: 0;
    }
    to {
        top: 81%;
    }
}

.bubble1 {
    width: 90px;
    height: 90px;
    animation-delay: 1s;
}

.bubble2 {
    width: 45px;
    height: 45px;
    animation-delay: 3s;
}

.bubble3 {
    width: 111px;
    height: 111px;
    animation-delay: 5s;
}

.bubble4 {
    width: 66px;
    height: 66px;
    animation-delay: 2s;
}

.bubble5 {
    width: 99px;
    height: 99px;
    animation-delay: 7s;
}

/* bubbles */

.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: #d68f0f;
    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;
}

.cate_title:before {
    content: '';
    position: absolute;
    width: 100px;
    height: 4px;
    background: #d68f0f;
    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: #f8d989;
    width: 500px;
    margin: 20px;
    padding: 17px;
    border-radius: 9px;
    left: 50%;
    transform: translate(-50%);
    box-shadow: 0px 0px 10px 0px #7e7e7e61;
}

.cookies_policy h3 {
    text-align: center;
    color: #4caf50;
}

.cookies_policy p {
    font-size: 14px;
    margin: 9px;
    color: #2c2c2c;
}

.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;
}

.business2 {
    background: var(--color);
    color: white;
    padding: 44px;
    margin: 0;
}

.business2 h1 {
    text-align: center;
    text-transform: capitalize;
    font-size: 35px;
}

.business2 h3 {
    font-size: 17px;
    text-align: center;
    font-weight: 400;
}

.elmnta {
    text-align: center;
    width: fit-content;
    padding: 16px 28px;
    border-radius: 59px;
    margin: 5% auto 27px;
    background: white;
    color: var(--color);
}

.elmntb {}

.elmntb h2 {}

.elmntb h3 {}

.bubble_s1,
.bubble_s2,
.bubble_s3 {
    width: 200px;
    height: 200px;
    background: radial-gradient(#ffffff78, transparent);
    border-radius: 100%;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
    animation: bubble_s 30s linear infinite alternate;
    -webkit-animation: bubble_s 30s linear infinite alternate;
    animation-delay: 5s;
    -webkit-animation-delay: 5s;
}

.bubble_s2 {
    width: 100px;
    height: 100px;
    -webkit-animation-delay: 10s;
}

.bubble_s3 {
    width: 150px;
    height: 150px;
    -webkit-animation-delay: 30s;
}

@keyframes bubble_s {
    from {
        left: 0;
    }
    to {
        left: 85%;
    }
}

@-webkit-keyframes bubble_s {
    from {
        left: 0;
    }
    to {
        left: 85%;
    }
}

.social_med_poster {
    padding: 40px 10px;
}

.social_med_poster h2 {
    font-size: 33px;
    text-align: center;
    padding: 24px;
    color: #202020;
    margin-bottom: 31px;
}

.social_med_poster h2:before {
    content: '';
    position: absolute;
    width: 100px;
    height: 5px;
    background: #d68f0f;
    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;
}

.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: #d68f0f;
    border-radius: 10px;
}

/* Handle on hover */

.social_med_poster_scroll::-webkit-scrollbar-thumb:hover {
    background: #097bd6;
}

.btn2 {
    background: #d68f0f;
    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: 195px;
    overflow: hidden;
    margin: 10px 4px;
    box-shadow: 0px 0px 10px 0px #b6b6b659;
    display: grid;
    grid-template-rows: 169px 20px auto;
    padding: 5px;
    border-radius: 5px;
}

.feedback_box img {
    width: 159;
    height: 159px;
    display: block;
    margin: 0 auto;
}

.feedback_box h3 {
    font-weight: 500;
    text-transform: capitalize;
    margin: 6px;
    font-size: 18px;
    height: 20px;
    color: black;
    overflow: hidden;
    white-space: pre;
    text-overflow: ellipsis;
}

.feedback_box i {
    color: #ffffff;
}

.feedback_box p {
    margin: 12px 6px;
    font-size: 12px;
    text-align: justify;
    color: #071e9d;
    height: 30px;
    font-weight: 400;
    overflow: hidden;
}

/* Position the image container (needed to position the left and right arrows) */

.containerimgback {}

.containerimg {
    position: relative;
    width: 400px;
    margin: 0 auto;
}

/* Hide the images by default */

.mySlides {
    display: none;
    height: 400px;
    overflow: hidden;
}

/* Add a pointer when hovering over the thumbnail images */

.cursor {
    cursor: pointer;
}

/* Next & previous buttons */

.prev,
.next {
    cursor: pointer;
    position: absolute;
    top: 40%;
    width: auto;
    padding: 16px;
    margin-top: -50px;
    color: white;
    font-weight: bold;
    font-size: 20px;
    user-select: none;
    border-radius: 4px;
    -webkit-user-select: none;
    background: #000000c4;
    color: white;
}

/* Position the "next button" to the right */

.next {
    right: 0;
}

.row_img_con {
    text-align: center;
    width: -webkit-fill-available;
}

/* On hover, add a black background color with a little bit see-through */

.prev:hover,
.next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */

.numbertext {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
}

/* Container for image text */

.caption-container {
    text-align: center;
    background-color: #222;
    padding: 2px 16px;
    color: white;
}

.row:after {
    content: "";
    display: table;
    clear: both;
}

/* Fading animation */

.fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
}

@-webkit-keyframes fade {
    from {
        opacity: .4
    }
    to {
        opacity: 1
    }
}

@keyframes fade {
    from {
        opacity: .4
    }
    to {
        opacity: 1
    }
}

/* Six columns side by side */

.column {
    width: 17.66%;
    margin: 3px;
    border: 3px solid #de33c2;
    border-radius: 4px;
    padding: 5px;
    display: inline-block;
}

/* Add a transparency effect for thumnbail images */

.demo {
    opacity: 0.6;
    height: 51px;
}

.active,
.demo:hover {
    opacity: 1;
}

.mySlides img {
    max-width: 100%;
    height: 100%;
}

.tnc {
    width: 80%;
    text-align: justify;
    margin: 0 auto;
}

.tnc h2 {
    margin: 20px auto;
}

.tnc p {
    margin: 14px 0px;
}