@charset "utf-8";
/* CSS Document */

.floating-offer{position: fixed;top: 60vh;right: .5em;background-color: var(--web-color3);color: #fff;height: 80px;width: 80px;border-radius: 140px 74px 109px 62px;display: grid;align-items: center;padding: 1.2em;box-shadow: -2px 2px 0px #d4d4d4, -3px 3px 0px #d4d4d4;z-index: 4;}
.floating-offer span:first-child{font-size: 1.5rem;display: block;line-height: 1;font-weight: 600;}
#trail-details{
}
.trail-road{position: relative;height:200px;
    margin-top:150px;
    width: 100%;
    text-align: center;
}
.box{
 width: 50px; 
 height: 50px; 
display: inline-block;
border-radius: 50px;
margin: 100px 0 0 0;
position: relative;
vertical-align: top;
 }
.box:nth-child(odd){
    margin:4em 0 0 4em;
}
.box:nth-child(even){margin: 0 0 0 4em;}

.box:first-child{
    margin-left:0px !important;
}
.box .circleicon{
    z-index: 1;
    border: 2px solid #d46161;
    background-color: #fff;
    width: 50px;
    height: 50px;
    border-radius: 50px;
    text-align: center;
    transition: 0.5s;
    position: relative;
    margin: auto;
    padding: 10px 5px;
    overflow: hidden;
    line-height: 30px;
}
.box .circleicon img{    max-width: 100%;
    max-height: 100%;    border-radius: 50%;}
.box .circleicon>i{line-height: 26px;
        font-size: 2em;
    }
.circlelabel{margin: 10px 0 0 0}

.thover-img{position: absolute;
    top: -50px;
    left: -50px;
    width: 150px;
    height: 150px;
    overflow: hidden;
    border-radius: 50%;
    z-index: 3;
    display: none;
box-shadow: rgba(0, 0, 0, 0.68) 0px 0px 10px;
    border: #829b48 3px solid;}

.thover-img img{width: 100%;
    height: 100%;
    object-fit: cover;}

.box:hover .thover-img{display: block;
    animation-name: circle;
  animation-duration: .5s;
  }
@keyframes circle {
  from {opacity: .5;transform-origin: center;transform: scale(0);}
  to {opacity: 1;transform-origin: center;transform: scale(1);}
}


.box:after {
    content: "";
    position: absolute;
    width: 130px;
    height: 1px;
    border-bottom: 2px dashed #0000006b;
    z-index: 0;
}

.box:nth-child(even):after {
    transform: rotate(23deg);
    top: 58px;
    left: 43px;
}

.box:nth-child(odd):after {
    transform: rotate(-25deg);
    top: -8px;
    left: 45px;
}

.box:last-child:after{display: none;}
.line{
    width: 100%;
    height: 1px;
    /* background-color: black; */
    position: absolute;
    border: #cccbcb 1px dashed;
}

.color1 .circleicon, .color1 .thover-img{border-color: var(--web-color1)}
.color1 .circleicon i{color: var(--web-color1)}

.color2 .circleicon, .color2 .thover-img{border-color: var(--web-color2);}
.color2 .circleicon i{color:var(--web-color2);}

.color3 .circleicon, .color3 .thover-img{border-color:var(--web-color3);}
.color3 .circleicon i{color:var(--web-color3);}

.color4 .circleicon, .color4 .thover-img{border-color:var(--web-color4);}
.color4 .circleicon i{color:var(--web-color4);}

/* .color5 .circleicon, .color5 .thover-img{border-color: #cead45;}
.color5 .circleicon i{color: #cead45;}

.color6 .circleicon, .color6 .thover-img{border-color: #829b48;}
.color6 .circleicon i{color: #829b48;}

.color7 .circleicon, .color7 .thover-img{border-color: #2a839c;}
.color7 .circleicon i{color: #2a839c;}

.color8 .circleicon, .color8 .thover-img{border-color: #d66c37;}
.color8 .circleicon i{color: #d66c37;} */

.color1 .trail-menu>ul>li:hover a{color: var(--web-color1)}
.color2 .trail-menu>ul>li:hover a{color: var(--web-color2)}
.color3 .trail-menu>ul>li:hover a{color: var(--web-color3)}
.color4 .trail-menu>ul>li:hover a{color: var(--web-color4)}

 #line1{
     top: 123px;
     left: 0;
     right: 0px;
 }
#box2:before{
    top: 220px;
    left: 150px;
    height: 115px;
    transform: rotate(120deg);
    -webkit-transform: rotate(120deg);
    -ms-transform: rotate(120deg);
    content: '';
}

.trail-menu{position: absolute;
    top: 85px;
    font-size: 1rem;
    left: -50%;
    display: none;
    z-index: 99;
    border-top: 30px rgba(255, 0, 0, 0) solid;
    }

.box:hover> .trail-menu{display: block;}
.trail-menu>ul{width: 200px;
            text-align: left;
            border: #ededed 1px solid;
            padding: 5px;
            position: relative;
            box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 10px;
            background: #fff;
            }

.trail-menu>ul>li{border-bottom: #ededed 1px solid;position: relative;}

.trail-menu>ul>li>.sub-menudiv{position: absolute;
    top: -6px;
    left: 107%;
    width: 100px;
    /* overflow: hidden; */
    background: #fff;
    padding: 0px;
    border: #ededed 1px solid;
    display: none;}

.box:nth-child(8) .trail-menu>ul>li>.sub-menudiv{right: 107% !important;left: inherit;}
.box:nth-child(7) .trail-menu>ul>li>.sub-menudiv{right: 107% !important;left: inherit;}

.trail-menu>ul>li:hover .sub-menudiv{display: block}

.trail-menu>ul>li:last-child{border-bottom: 0px;}
.imgbox-2{width: 100%;
        height: 120px;}
.imgbox-2 img{width: 100%;height:100%;object-fit: cover}
.sub-menudiv h4{font-size: 1.2rem;}
.trail-menu>ul>li a{display: block;padding: 6px 10px;/*background: linear-gradient(to right, #bf0b77 0%, #5f1bb1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;*/
    color:#000;}


.trail-menu ul:before{position: absolute;
    content: '';
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 15px solid #ececec;
    top: -15px;
    left: 40px;}

/*#box4 .trail-menu ul:before{left: 60px;}*/

.trail-menu>ul>li.sub-menu:before{display: inline-block;
    font-family: FontAwesome;
    content: "\f105";
    margin-right: 10px;
    font-size: 1.3em;
    position: absolute;
    right: 0;}
.trail-menu>ul>li:hover{/*background: linear-gradient(to right, #bf0b77 0%, #5f1bb1 100%);*/}

.trail-menu>ul>li.sub-menu:hover :before{color: #fff;}
/*End:: trail details css*/


.dayitenary{border: #ccc 1px solid;    box-shadow: rgba(0, 0, 0, 0.14) 0 2px 7px;padding: 30px;
            background:url(../images/dayitineary-images.png) no-repeat right bottom;}

.dayitenarytab{border-bottom: 1px solid #dee2e6;
    background: #e8e8e8;
    padding: 15px 50px 0;
    border-radius: 4px 4px 0 0;}
/*trail details*/

.dayitenarytab .nav-link{padding: 4px 12px 2px;border: 1px solid #c7c7c7;    border-bottom: 0px;    background: #e8e8e8;}

.dayitenarytab .nav-tabs .nav-link:focus, .dayitenarytab .nav-tabs .nav-link:hover{background: #fff;}

.dayitenarytab .nav-tabs .nav-item {
    margin-bottom: -3px;
    margin-right: 10px;
    height: inherit;
}
.dayitenary-imgbox{width:100%;height:240px;overflow:hidden;box-shadow: rgba(0, 0, 0, 0.25098039215686274) }
.dayitenary-imgbox img{width:100%;height:100%;object-fit:cover;}
.dayitenary ul li{padding: 0px 0;}
.dayitenary ul li h4{color: #4f5e7b;}
.dayitenary ul li span{    margin-bottom: 0.4em;color: #4f5e7b; display: block;}
.dayimgbox{height: 220px;overflow: hidden;}
.top-attractionheading{position: relative; display: table;}
.top-attractionheading h3{font-size: 5em;font-weight: 800;}
.top-attractionheading h4{font-size: 2em;font-weight: 400;margin-bottom: -18px;}
#cuisine h3, #cuisine h4, #travelexp h3, #travelexp h4, #about-odisha h4, #about-odisha h3, #inner-banner h4, #trailroursnew h3
, #trailroursnew h4{color:#ddd;}


.bottomline img {
    width: 74%;
    margin-left: 20px;
    margin-top: -10px;
}

.daywise-no{    position: absolute;
    right: 0;
    background: #7570b3;
    top: 0;
    color: #fff;
    padding: 2px 20px;
    border-radius: 4px;}

/*trail details css start*/

.insimg-box{height: 145px;overflow: hidden;position: relative;}
.insimg-details a{text-decoration: underline !important;position: absolute;
    bottom: 15px;}
.ins-img{border:1px solid ;    margin-bottom: 30px;}
.insimg-box img{height: 100%;
                width: 100%;
                object-fit: cover;}
.b1{border-color: #d76c34;}
.b1 h5, .b1 i{color: #d76c34;}
.b2{border-color: #cfac44;}
.b2 h5, .b2 i{color: #cfac44;}
.b3{border-color: #829b48;}
.b3 h5, .b3 i{color: #829b48;}
.b4{border-color: #4c97ac;}
.b4 h5, .b4 i{color: #4c97ac;}

.insimg-details{
    padding: 15px 15px 50px;
    min-height: 270px;
        /*position: relative;*/}
/*trail details css end*/


/*right side btn start*/

.trail-contact{
                position: fixed;
                top: 35vh;
                right: 0;
                z-index: 12;
}
.plus-minus{
    background: #fff;
    border-radius: 30px 0 0 30px;
     text-align: right;
    border: 1px solid #e1e1e1;
    box-shadow: 2px -1px 8px rgba(35, 35, 35, 0.8);
    }
.plus-minus a{height: 52px;width: 57px;color: #545454;cursor: pointer;font-size: 1.5em;padding: 4px 6px;transition: .5s;display: grid;align-items: center;text-align: center;}
.social-minus{display: none;}
.trail-contactbtn {

}
.trail-contactbtn ul {
 
    position: absolute;
    top: 56px;
    height: 0;
    overflow: hidden;
    right: -12px;
    transition: .5s;
    padding: 0 1em;
}
.trail-contact.showContactbtn .trail-contactbtn ul{height: 300px;padding: .5em 1em;}

.trail-contactbtn ul li {
    
margin: 0 0 .5em 0;    
display: block;
}
.trail-contactbtn ul li a{width: 50px;height: 50px;display: grid;align-items: center;text-align: center;border: 1px solid rgba(0, 0, 0, 0.15);border-radius: 45px;background-color: #fff;transition: .5s;box-shadow: -4px 0px 12px rgba(4, 4, 4, 0.47);}

.trail-contactbtn ul li:first-child a{background: #4099ff;color: #fff}

.trail-contactbtn ul li:nth-child(2) a{background: #3B5998;color: #fff}

.trail-contactbtn ul li:nth-child(3) a{background: #f00;color: #fff}

.trail-contactbtn ul li:nth-child(4) a{background-image: -webkit-linear-gradient(left, #d55ba4 0%, #9a6ed0 100%), -webkit-linear-gradient(left, #d55ba4 0%, #9a6ed0 100%) !important;color: #ffffff}

.trail-contactbtn ul li:nth-child(5) a{background: #cb2027;color: #fff}

.trail-contactbtn ul li i {
   -moz-border-radius: 50%;
    font-size: 1.2em;
   -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    
}


/*right side btn end*/



/*right side form start*/

.interesteddiv1{
    position: absolute;
    width: 500px;
    background: #fff;
    right: 70px;
    border: #ededed 1px solid;
    padding: 15px;
    box-shadow: rgba(0, 0, 0, 0.3215686274509804) 0 0 10px;
    display: none;
}
.interesteddiv1 h6{font-weight: normal;}
.interesteddiv1 form{position:relative;}
.interesteddiv1 form:after{position: absolute;
    content: '';
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 15px solid #ddd;
    top: 0px;
    right: -31px;}
/*right side form end*/
/*Start*/
.ins-img.card .offerbtn{position: relative;display: block;width: fit-content;}
.ins-img.card{background: transparent;min-height: 420px;}
.ins-img.card h3{font-size: 1em;margin-bottom: 0;padding-left: 15px;}
.ins-img.card .duration{padding-left: 15px;display: block;margin-bottom: 10px;}
.ins-img.card .heading-details {
    position: absolute;
    color: #fff;
    top: 68px;
    left: 0;
    width: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 1) 100%, rgba(0, 0, 0, 1) 100%);
    min-height: 77px;
}
.ins-img.card h6 {color: red; display: block; margin-bottom: 5px;}
.ins-img.card p{    font-size: 0.9em;}
/*End*/
@media (max-width:768px){
#trail-details{display:none;}
.ins-img.card {
    min-height: auto;display: block;
}
.insimg-details {
    padding: 1rem;
    min-height: auto;
}
.insimg-box {
    height: 120px;
    width: 165px;
    float: left;
    margin: 1rem 1rem 0rem 1rem;
    border: 1px solid #e4e4e4;
}
.ins-img.card .heading-details {
    position: unset;
    min-height: auto;
    background: none;
    color: #000;
}
.ins-img.card .offerbtn {
    position: absolute;
    left: 0;
    top: 106px;
}
.insimg-details a{position: unset;}


}

@media (max-width:575px){
.dayitenary{padding:15px 0;box-shadow: none;}
.cultureimgdiv {
    padding: 15px;
}
.ins-img.card .offerbtn {
    top: 110px;
}

.dayitenarytab{padding: 15px;}
.dayitenarytab .nav-link{padding: 0.2rem 1rem;}
.dayitenarytab .nav-tabs .nav-item{margin-right: 0px;}
.interesteddiv1{
    width: 240px;
    right: 50px;
    }
.interesteddiv1 h6{font-size: .8rem;font-weight: normal;}
.trail-contact{top: 15vh;}
.plus-minus a{height: 30px;
    width: 40px;padding: 4px 0px;}
.trail-contactbtn ul li a{    width: 30px;
        height: 30px;}
.trail-contactbtn ul{top:34px;}
.trail-contactbtn ul li{margin: 0 0 .2em 0;}
.tourdetailrow{margin-bottom: 5px;}
.tourdetailtextarea textarea{margin-bottom: 10px;height: 60px;}
.form-tourdetail .form-control{font-size: .8rem;}
.interesteddiv1 .alert{    padding: 0 5px;
    margin-bottom: .5rem;}
    .user-message{
        font-size: 13px;
    }
}


@media (max-width: 430px){
.insimg-box {
    height: 80px;
    width: 120px;
}
.ins-img.card .offerbtn {
    top: 16px;
    left: 16px;
    background: none;
    padding: 0;
}
.culturelink li {
    margin: 0 0 1rem 0;
}


}


@media (max-width: 320px){
.insimg-box {
    height: auto;
    width: 100%;
    min-height: 140px;
    float: none;
    margin: 0;
    border: none;
    background: #dedede;
}
.ins-img.card h3,.ins-img.card .duration{padding: 0}
.ins-img.card .offerbtn {
    top: 1px;
    left: 1px;
    box-shadow: 1px 1px 3px #000;
    border-radius: 4px;
}

}


