*{
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
}
@import url('https://fonts.googleapis.com/css2?family=Muli&display=swap');


body{
    font-family:  var(--fontfamily);
    background-color: var(--);
}
:root{
  --darkblue : #0e1e2c ;
  --darkblue2 : #132738 ;
  --lightbg : #f5f5f5 ;
  --ligthbg2 : #F4F8FB ;
  --linkcolor : #0a66c2 ;
   --bordercolor : #DBE1E5 ;
   --cardbg : #fff ;
   --textcolorlight : #595959 ;
   --textcolordark : #212221 ;
   --cardinnerborder : #CFDDFF ;
   --cardinnerbg : #cfddff33 ;
   --fontfamily : 'Muli', sans-serif ;
   --btncolor:#F27838;
}
.blogdetails{
    margin-top: 60px;
}

.blog_detail{

    background-color:var(--cardinnerbg); 
    padding:30px 20px; 
    border-radius: 5px;
    padding-top: 0;
    margin-bottom: 20px;
}
.blog_detail h4{
    font-size: 20px;
        font-weight: bold;
}
.blogtitle{
    color: var(--linkcolor);
    font-size: 20px !important;
}
.details-time{
    color: #595959;
    font-size: 14px;
}
.blog_detail img{
    width: 100%;
    height: 40vh;
    object-fit: cover;
    border-radius: 7px;
}
.detail-title1{
    font-size: 23px;
    font-weight: 700;
}
.blog-title-des h5{
    font-weight: 700;

}
.comment-section h5{
    font-weight: 700;

}
.comment-section p{
    color:var(--textcolorlight);
    font-size: 15px;
}
textarea {
    width:100%;
    height: 130px;
    padding: 15px;
    font-size: 16px;
    border: 1px solid var(--bordercolor) ;
    border-radius: 10px;
    outline: none;
    resize: none;
    transition: all 0.3s ease-in-out;
}

textarea:focus {
    border-color: red;
    box-shadow: 0 0 10px rgba(0, 123, 255, 0.3);
}

textarea::placeholder {
    color: #aaa;
    font-style: italic;
    transition: all 0.3s ease-in-out;
}

textarea:focus::placeholder {
    color:var(--textcolorlight);
    font-size: 14px;
}
.checkbox p{
    color: var(--textcolorlight);
}
.input{
    width: 100%;
    display: flex;
    gap: 10px;
}
.input input{
    width: 100%;
    height: 40px;
    border-radius: 3px;
}
.input input :focus{
    border: solid 1px red;


}
/* .input {
    display: flex;
    flex-direction: column;
    gap: 10px;
} */

.input input{
    width: 100%;
    padding: 12px;
    font-size: 16px;
    border: 1px solid var(--bordercolor);
    border-radius: 8px;
    outline: none;
    transition: all 0.3s ease-in-out;
}

input:focus {
    border-color: red;
    box-shadow: red
}
.checkbox{
    display: flex;
    align-items: center;
 


}
.comment-btn{
    width: 30%;
    height: 35px;
    color: white;
    background-color:var(--btncolor);
 border: none;
 border-radius: 5px;
 font-size: 14px;

}
/* tour card sec css */

#tour-list-sec,
#tour-list-sec-best,
#tour-list-sec-dept {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 40px;
}

.tour-card-main {
  padding: 5px;
  border-radius: 13px;
      max-width: 320px;
  border: 1px solid var(--bordercolor);
  transition: all 150ms;
}

.tour-card-main:hover {
  box-shadow: 0 0 20px #00000026;
}

.card-img-sec img {
  height: 90px;
  border-radius: 7px;
  width: 120px;
  object-fit: cover;
}

.card-img {
  width: 100%;
  max-width: 140px;
}

.card-img-sec {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: start;
}

.card-img-sec h2 {
  font-size: 17px !important;
  font-weight: bold;
  margin: 10px 0px 5px 0px !important;
}

.card-img-sec h4 {
  font-size: 14px;
  color: var(--textcolordark);
  font-weight: 900;
}

.card-img-sec h3 {
  margin-top: 10px;
  font-size: 16px;
  color: var(--titlecolor1);
  font-weight: 900;
}
/* tour card price  */

.tour-card-price-main {
  margin: 20px 3px 3px 3px;
  padding: 10px;
  border-radius: 5px;
  background-color: var(--cardinnerbg);
  border: 1px solid var(--cardinnerborder);
}

.tour-card-price-main button {
  margin-top: 15px;
  width: 100%;
  border: none;
  background-color: var(--darkblue);
  padding: 7px 20px;
  border-radius: 5px;
}

.tour-card-price-main button:hover {
  background-color: var(--darkblue2);
}

.tour-card-price-main button a {
  color: var(--lightbg);
  font-size: 16px;
  text-decoration: none;
}

.card-price-sec {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: start;
}

.card-price-sec h5 {
  font-size: 16px;
  font-weight: 900;
  color: var(--textcolordark);
}

.card-price-sec h3 {
  font-size: 16px !important;
  font-weight: 900;
  margin: 5px 0px !important;
}

.card-price-sec h3 a {
  text-decoration: none;
}

.card-price-sec h2 {
  font-size: 18px !important;
  font-weight: 900;
  margin: 0px 0px 5px 0px !important;
  text-align: right;

  .card-price-sec h2 del {
    font-size: 14px;
    color: #777;
  }
}

.card-price-sec h2 span {
  font-size: 13px;
  color: var(--textcolorlight);
}

.card-price-sec p {
  text-align: right !important;
  font-size: 13px;
  font-weight: bolder;
  color: var(--textcolordark);
  max-width: 150px;
  display: none;
}

.card-price-sec h2 del {
  font-size: 14px;
  color: #777;
}
@media only screen and (min-width: 768px) and (max-width: 1200px) {
   .container {
        max-width: 100% !important;
    }
    
}

@media (max-width: 992px) {
  .input{
    flex-direction: column;
  }  
  .comment-btn{
    width: 100%;
  }
   
   
}
@media (max-width: 992px) {
    .input{
      flex-direction: column;
    }  
    .comment-btn{
      width: 100%;
    }
    .checkbox{
        width: 100%;
    }
     
     
  }
  @media (max-width: 752px) {
    .input{
      flex-direction: column;
    }  
    .comment-btn{
      width: 100%;
    }
    .checkbox{
        width: 100%;
    }
     
     
     
  }