@font-face {
    font-family: 'Graphik';
    src: url('Graphik-Regular-Trial.otf') format('otf'),
            url('Graphik-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Graphik', sans-serif;
    font-weight: 400;
}
header{
    background-color: #1a1a1a;
    height: 22vh;
    color: #fff;
}
.header-container{
    display: flex;
 
    flex-direction: column;
    
    align-items: center;
    height: 100%;
    
    
}

.header-top{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding-top: 12px;
  
}
.header-top-upper{
    display: flex;
    column-gap: 28px;
    align-items: center;
    width: 90%;
    padding: 0 20px;
}
.logo{
   width: 13%;
   
}
.logo img{
    width: 136px;
    height: auto;
}
.header-top-links{
    width: 50%;
}
.header-top-links input{
    width: 100%;
    height: 48px;
    border-radius: 8px;
    border: 1px solid #ccc;
    padding: 0 38px;
    font-weight: 500;
    font-family: 'Graphik', sans-serif;
    font-size: 16px;
}
.search-container{
    position: relative;
    width: 100%;
     height: 100%;
     box-sizing: border-box;
}
.search-icon{
    position: absolute;
   
    right: 5px;
    z-index: 300;
    top: 30%;
    left: 12px;
   color: #000;
    font-size: 20px;
    cursor: pointer;
   
   
   }


.header-top-icons{
    width: 50%;


}
.header-top-icons ul{
    display: flex;
    align-items: center;
    list-style: none;
        column-gap: 34px;
}
.header-top-icons ul li{
    display: flex;
    align-items: center;

}
.header-top-icons ul li a{
    color: #fff;
    text-decoration: none;
    font-weight: 400;
    font-size: 14px;
}
.newbtn{
    background-color: #799dfb;
    color: #000 !important;
    font-weight: 500;
    font-size: 14px;
    height:46px ;
    padding: 0px 24px ;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* ......................... header bottom */
.header-bottom{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2rem;
}
.header-bottom-links{
    width: 95%;
    display: flex;
    
    align-items: center;
}
.header-bottom-links ul{
    display: flex;
    gap: 16px;
    align-items: center;
    list-style: none;
    width: 50%;
}
.header-bottom-links ul li a{
    font-weight: 300;
    font-size: 16px;
    color: #948f91;
    font-size: 12px;
}
.header-bottom-links ul li {
    font-weight: 300;
    font-size: 16px;
    color: #948f91;
    font-size: 12px;
}
/* review and rattings */
.section-container{
    width: 100% !important;
    display: flex;
    width: 100%;
    justify-content: center;
    padding-bottom: 56px;
    
}
.after-header-container{
    background-color: #000;
}
.after-header{
    width: 100%;
    height: 7vh;
    background-color: #fff;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
 
}
.company-container{
    width: 95%;
    display: flex;
    
    justify-content: space-between;
    /* padding-top: 38px; */
    column-gap: 56px;
    position: relative;

    
}
.review-container{
    width: 70%;
}
/* rattng box */
.rating-container{
    width: 30%;
     position: sticky;
     top: 0; /* Sticks to the top of the viewport */
  padding: 10px;
  height: fit-content;
    
}
.rating-header{
    width: 100%;
    display: flex;
    gap: 24px;
    border: 1px solid #d2d2d2;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);

    border-radius: 14px;
    padding: 32px 32px;
   
 
    
}
.rating-header-left{
    width: 30%;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.rating-header-left h2{
    font-weight: 800;
    font-size: 48px;
    line-height: 56px;
}
.rating-header-left p{
    font-weight: 500;
    font-size: 14px;
    
}
.rating-header-left .totalreview{
    font-weight: 400;
    font-size: 12px;
 
}
.rating-header-center{
    width: 70%;
    display: flex;
}
.rating-header-center ul {
    width: 100% ;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
.rating-header-center ul li{
    list-style: none;
    font-size: 13px;
    font-weight: 200;
}
.firstele{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.firstele p{
    width: 30%;
}
.firstele div{
    width: 70%;
}
/* .rating-header-righ{
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
} */
.rating-five{
   
    background-color: #d2d2d2;
    height: 8px;
    width: 100%;
    border-radius: 25px;
    position: relative;
    
}
.rating-five-green{
    background-color: #02b77c;
    position: absolute;
    z-index: 200;
    height: 8px;
     width:116px !important ;
    left: 0px;
    border-radius: 25px;
}
.rating-four-green{
    background-color: #acda81;
    position: absolute;
    z-index: 200;
    height: 8px;
    width:18px !important ;
    left: 0px;
    border-radius: 25px;
}
/* after rating container  */
.rating-slider{
    width: 100%;
    display: flex;
   gap: 16px;
    align-items: center;
    padding: 0 20px;
    margin-top: 24px;
    border: 1px solid #d2d2d2;
    padding: 18px 16px;
    border-radius: 16px;
    font-size: 15px;
}



/* review container */
.review-header{
    width: 100%;
    display: flex;
  
}
.review-header-left {
    width: 20%;
    display: flex
;
    justify-content: center;
    align-items: flex-start;
    height: 100%;
    padding-top: 24px;
}
.review-header-left img{
    width: 50%;
    align-self: center;
    
}

.review-header-right{
    width: 80%;
    display: flex;
    justify-content: start;

}
.review-header-right-top{
    width: 60%;
    display: flex;
    flex-direction: column;
    gap: 14px;
   
}
.claimed-profile{
    width: fit-content;
    padding: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #d2d2d2;
    font-weight: 200;

}
.claimed-profile p{
    color: #353333 !important;
    font-weight: 200 !important;
    font-size: 11px !important;
}
.review-header-right-top h2{
    font-weight: 700;
    font-size: 36px;
    line-height: 28px;
    text-align: left;
    text-transform: capitalize;
}
.review-header-right-top p{
    font-weight: 500;
    font-size: 14px;
    color: #000;
}
.review-header-right-top ul{
    width: 100%;
    display: flex;
   align-items: center;
    
    gap: 12px;
    list-style: none;
    
}
.dot{
    width: 3px;
    height: 3px;
    background-color: #000;
    border-radius: 50%;
}
.review-header-right-top ul li{
    display: flex;
    

}

.review-header-right-top ul li img{
    width: 100px;
    height: 20px;
    
  
}
.review-header-right-bottom{
    display: flex;
    gap: 10px;
    width: 95%;
}
.review-button{
    background-color: #3b57bd;
    color: #fff;
    font-weight: 500;
    font-size: 15px;
    height:44px ;
    padding: 0px 24px ;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 50%;
 
    
    
}

.visit-button{
    background-color: #fff;
    color: #3b57bd;
    font-weight: 500;
    font-size: 15px;
    height:44px ;
    padding: 0px 24px ;
    border: 1px solid #3b57bd;  
    border-radius: 25px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 50%;
    text-decoration: none;
 
}

.review-hr{
    width: 100%;
    height: 1px;
    background-color: #e2e0e0;
    margin: 28px 0 16px 0;
}

/* alert section */
.alert-section{
    width: 100%;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 10px;
    background-color: #fbfbf3;
    border-radius: 18px;
    border: 1px solid #d2d2d2;
    font-size: 14px;
}
.review-heading2{
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 24px;
  
}
.review-heading2 h3{
    font-weight: 500;
    font-size: 24px;
    
}
.review-heading p{
    font-weight: 500;
    font-size: 16px;
    color: #3b57bd;
    
}

/* .................main review section ..................... */
.review-section{
    width: 100%;
    display: flex;
    flex-direction: column;
   

}
.reviews-container2{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 32px;
}
.review-card{
    display: grid;
    grid-template-columns: auto auto;
    gap: 60px;
}
.review-card-grid{
    display: flex;
    flex-direction: column;
    gap: 8px;

}
.review-card-header{
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
}
.user-image{
    width: 40px;
    height: 40px;
    border-radius: 50%;
   
}
.user-initials{
    background-color: #6a9e39;
    height: 44px;
    width: 44px;
    display: flex;  
    align-items: center;
    justify-content: center;
    color: #fff;
    border-radius: 25px;

}
.user1{
  background-color: #0098a6;
}
.user2{
  background-color: #f5511e;
}
.user3{
  background-color: #65a13a;
}
.user4{
  background-color: #5d4039;
}
.user5{
  background-color: #445a65;
}
.user6{
  background-color: #fedde8;
}
.user7{
  background-color: #7a1fa2;
}
.user8{
  background-color: #7a1fa2;
}
.user9{
  background-color: #689f39;
}

.user-initials p{
    font-weight: 500;
    font-size: 16px;
    text-transform: uppercase;
    margin: 0;}

.user-image img{
    width: 100%;
    height: 100%;
    border-radius: 50%;
}
.user-details{
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.user-details h4{
    font-weight: 500;
    font-size: 16px;
}
.user-details p{
    font-weight: 400;
    font-size: 14px;
    color: rgb(96, 94, 86,1);
    
}
.review-card-rating{
    width: 22%;
    margin-top: 8px;
}
.review-card-rating img{
    width: 100%;
}

.review-card-content{
    color: #3c3725;
}
.review-card-content p{
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
}
.review-card-content h6{
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 16px;

}
.review-card-actions{
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 16px;
   color: rgb(96, 94, 86,1);
   font-size: 14px;
}
.review-card-action1{
    display: flex;
    align-items: center;
    gap: 8px;
}

.review-card-action2{
      color: rgb(96, 94, 86,1);
}

/* ..............................review-button-container............... */
.review-button-container{
    width: 100%;
    display: flex;
    justify-content: start;
    margin-top: 32px;
}
.seeall-button{
    background-color: #e4ebfe;
    color: #3b57bd;
    padding: 12px 72px;
    cursor: pointer;
    border: none;
    border-radius: 35px;    
    font-weight: 500;
    font-size: 16px;
}
.review-notice{
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
        color: rgb(96, 94, 86,1);
        margin-top: 12px;
  
}
.review-notice p{
   
    
}

/* *************************company details section ****************** */
.details-section{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 56px;
    justify-content: space-between;
    padding-top: 32px;
    
}
.company-details{
    display: flex;
    

}
.company-info{
    display: flex;
  

}
.company-details-header{
    width: 30%;
}
.company-details-header h3{
    font-weight: 500;
    font-size: 24px;
    line-height: 28px;
}
.company-details-content{
    width: 70%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.company-details-content div{
    display: flex;
    align-items: center;
    
}

.company-details-content div p{
    font-weight: 400;
    font-size: 12px;
    color: #3b57bd;
    margin-right: 8px;
    border: 1px solid #d2d2d2;
    padding: 4px 6px;
}
.company-details-content  h6{
    font-weight: 550;
    font-size: 16px;
    margin-right: 8px;
}
.company-details-content p{
    font-weight: 400;
    font-size: 16px;
    color: #3b3f50;
}
/* company info */
.company-info-header{
    width: 30%;
}
.company-info-header h3{
    font-weight: 500;
    font-size: 24px;
    line-height: 28px;
}
.company-info-content{
    width: 70%;
}

.company-info-content ul{
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.company-info-content ul li{
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 400;
    font-size: 16px;
    color: #3c3725;
}
.company-info-content ul li a{
    
    
    color: #3c3725;
}


/* ....................... slider ........................ */
.section {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 44px 32px;
    background-color: #f9f8f4;
   
    border-top: 1px  solid #d2d2d2;
    border-bottom:1px  solid #d2d2d2 ;
    
}

.section h2 {
  font-size: 24px;
  font-weight semibold;
  display: flex;
  align-items: center;
}
.carousel-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
  

}
.carousel-header-heading{
    display: flex;
    align-items: center;
    gap: 8px;
}
.carousel-header-heading h2 {
    font-size: 24px;
    font-weight: semibold;
    margin: 0;
}
   

.carousel-arrows{
    display: flex;
    gap: 2px;
}
.carousel-arrows button {
    width: 35px;
    height: 35px;
  border: 1px solid #3B57BD;
  border-radius: 50%;
  padding: 10px;
  cursor: pointer;
  font-size: 16px;
  display: flex;
    align-items: center;

    justify-content: center;
}
.carousel-arrows button:hover {
  background-color: #e5e7ef;
  color: #fff;
}
.carousel-arrows button:disabled {
  background-color: #ddd;
  cursor: not-allowed;
}
.carousel-arrows button:disabled:hover {
  background-color: #ddd;
}
.carousel-arrows img {
  width: 15px;
  height: 15px;
}
.info-icon {
  margin-left: 6px;
  font-size: 14px;
  color: #666;
}

.carousel-wrapper {
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
}

.carousel-container {
  overflow: hidden;
  flex: 1;
  width: 100%;
}

.carousel {
  display: flex;
  width: 100%;
  gap: 20px;
  transition: transform 0.3s ease;
}

.card {
  background: #fff;
  border-radius: 12px;
  min-width: 25%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  border: 1px solid #ddd;
  padding: 15px;
  flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.logo-container{
    width: 70px;
    border: 1px solid #ddd;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;

}

.logo-container img {
  width: 60px;
  height: 60px;
  object-fit: contain;


}

.card-title {
  font-weight: semibold;
  font-size: 16px;
}

.card-url {
  font-size: 14px;
  color: #555;
  margin-bottom: 8px;
}

.rating {
  display: flex;
  align-items: center;
  gap: 5px;
}
.rating img{
  width: 80px;
  height: 16px;
  object-fit: contain;
}
.rating p {
  font-size: 14px;
  color: rgb(96, 94, 86,1);
  margin: 0;
}
.rating span {
  font-size: 14px;
  color: #000;
}

.arrow {
  background: #f0f0f0;
  border: none;
  border-radius: 50%;
  padding: 10px;
  margin: 0 10px;
  cursor: pointer;
  font-size: 16px;
}

.arrow:hover {
  background: #ddd;
}


.rating-five-percentage{
   
    background-color: #d2d2d2;
    height: 8px;
    width: 100%;
    border-radius: 25px;
    position: relative;
    
}


/* ......................... */
.main-rating-section{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 44px;
   
}
.main-rating-container{
    width: 95%;
    display: flex;
    position: relative;
   
    
    
}
.main-rating-box{
    width: 30%;
    position: relative;
    
}
.main-rating-sticky{
    position: sticky;
    top: 0; /* Sticks to the top of the viewport */
    padding-top: 44px;
    height: fit-content;
    display: flex;
    gap: 12px;
    flex-direction: column;
    padding-bottom: 120px;
   
}
.main-rating-header{
    width: 100%;
    display: flex;
    align-items: center;
    gap: 16px;
      ;
}
.main-rating-header h3{
    font-weight: 600;
    font-size: 22px;
    color: #000;
}
.main-rating-content h3{
    font-weight: 500;
    font-size: 24px;
    color: #000;

}
.main-rating-footer{
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
     color: rgb(96, 94, 86,1);
    

}
.main-rating-footer div{
    width:4px;
    height: 4px;
    background-color: #000;
    border-radius: 50px;
}
.write-review{
    color: #3b57bd;
    text-decoration: none;

}
.write-review :hover{
    text-decoration: underline;

}


.rating-container-black{
    border: 1px solid #d2d2d2;
    border-radius: 18px;
}
.rating-header-black{
    padding: 18px 12px;
}
.rating-header-black ul{
    display: flex;
    gap: 6px;
    flex-direction: column;
}
.rating-header-black ul li{
    display: flex;
    gap: 12px;
    align-items: center;
}
.rating-header-black ul li:nth-child(5){
    opacity: 0.5;
    cursor: not-allowed;
}
.rating-header-black ul li:nth-child(4){
    opacity: 0.5;
    cursor: not-allowed;
}
.rating-header-black ul li:nth-child(3){
    opacity: 0.5;
    cursor: not-allowed;
}
.rating-header-black ul li p{
    font-weight: 500;
    font-size: 14px;
    color: #000;
}
.rating-header-black ul li input{
    width: 25px;
    height: 25px;
    cursor: pointer;
    border-radius: 32px;
    border: 1px solid #d2d2d2;
}
.rating-five-percentage{
    width: 55%;
    height: 12px;
    background-color: #f3efec;
}
.rating-five-percentage-green{
    position: absolute;
    z-index: 200;
    height: 12px;
     width:165px !important ;
    left: 0px;
    border-radius: 25px;
    background-color: #000;
}
.rating-four-percentage-green{
    position: absolute;
    z-index: 200;
    height: 12px;
     width:36px !important ;
    left: 0px;
    border-radius: 25px;
    background-color: #000;
}

.rating-header-black ul li input:checked + p {
    color: #000;
}
/*   */

.main-rating-list{
    width:65%;
    padding-left: 56px;
}
.main-rating-list-container{
    width: 70%;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-top: 56px;
}
.keyword-search{
    width: 100%;
    position: relative;
   
}
.keyword-search input{
    width: 100%;
    height: 44px;
    border-radius: 25px;
    border: 1px solid #ccc;
    padding: 0 38px;
    font-weight: 500;
    font-family: 'Graphik', sans-serif;
    font-size: 16px;
   
}
.search-icon2{
    position: absolute;
    right: 5px;
    z-index: 300;
    left: 2%;
    top: 30%;
    width: 20px;
    height: 20px;
    
}
.filter-button{
    background-color: #fff;
    color: #000; ;
    font-weight: 500;
    font-size: 14px;
    height: 44px;
    padding: 0px 24px ;
    border: none;
    border: 1px solid #d2d2d2;
    border-radius: 25px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
}
.filtersvg{
    width: 16px;
    height: 16px;
    color: #ccc;
    rotate: 270deg;
}
.recentsvg{
    width: 16px;
    height: 16px;
    color: #ccc;
    
}
.filter-buttons-box{
    display: flex;
    gap: 16px;
   
}
.review-card-profile{
    display: flex;
    justify-content: space-between;
}
.review-card-date{
    width: 100%;
    display: flex;
    justify-content: end;
    color: rgb(96, 94, 86,1);
}
.review-detail{
    display: flex;
    align-items: center;
    gap: 16px;
}
.review-detail-date{
    font-weight: 400;
    font-size: 14px;
    color: #000;
    background-color: #e7e7e5;
    padding: 2px;
    border-radius: 4px;
}
.review-detail-date p{
    padding: 2px 8px;
    font-size: 12px;
    
}
.review-section{
    display: flex;
    flex-direction: column;
    gap: 56px;
}
/* pagination */


    .pagination {
      display: flex;
      list-style: none;
      border: 1px solid #000;
      border-radius: 6px;
      overflow: hidden;
      width: 100%;
      height: 44px;
    }

    .pagination li {
      border-right: 1px solid #000;
      width: 12%;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      
    }
    .pagination li:first-child {
      border-right: none;
      width: 20%;
      border-right: 1px solid #000;
     
    }
    .pagination li:last-child {
      border-right: none;
      width: 20%;
     
    }

    .pagination a {
      display: block;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      text-decoration: none;
      color: #000;
      transition: background 0.3s;
    }

    .pagination a:hover {
      background: #f1f1f1;
    }

    .pagination .active a {
      background: #e6f0ff;
      color: #000;
      font-weight: bold;
    }

    .disabled a {
      color: #bbb;
      pointer-events: none;
    }


    /* accordion  */

    .accordion-container {
      width: 100%;
      max-width: 600px;
      border: 1px solid #ddd;
      border-radius: 8px;
      padding: 24px;
    }

    h2 {
      text-align: center;
      margin-bottom: 20px;
    }

    .accordion-item {
      background: #c9f1f6;
      border-radius: 6px;
      margin: 16px 0;
      overflow: hidden;
    }

    .accordion-header {
      cursor: pointer;
      padding: 15px 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-weight: 500;
      color: #000;
    }
/* 
    .accordion-header:hover {
      background: #b6eaf0;
    } */

    .accordion-header svg {
      width: 16px;
      height: 16px;
      transition: transform 0.3s ease;
    }

    .accordion-header.active svg {
      transform: rotate(180deg); /* flip when active */
    }

    .accordion-content {
      max-height: 0;
      overflow: hidden;
      padding: 0 16px;
      font-size: 14px;
      line-height: 1.5;
      transition: max-height 0.3s ease, padding 0.3s ease;
    }
    /* .accordion-content.open {
  max-height: 500px; 
  padding: 15px 20px;
} */

    .accordion-content.open {
        max-height: 1000px !important; /* adjust as needed */
        padding: 12px 16px;
    }

    .accordion-content p a {
      text-decoration: underline;
      color: #000;
    }
     .accordion-content p a:hover{
      text-decoration: none;
      color: #3b57bb;
    }

    .cta-button {
      display: block;
      width: 100%;
      text-align: center;
      margin-top: 20px;
      background: #3b57bb;
      color: #fff;
      border-radius: 25px;
      padding: 15px;
      text-decoration: none;
      font-weight: 500;
      transition: background 0.3s;
    }

    .cta-button:hover {
      background: #2b32c7;
    }
/* footer */

    footer {
      background-color: #1a1a1a;
      padding: 60px 24px;
      color: #ccc;
      display: flex;
        flex-direction: column;
        gap:40px
    }

    .footer-top {
        display: flex;
        align-items: flex-start;
        gap: 120px;
        width: 100%;
        margin: 0 auto;

    }

    .footer-column h4 {
      color: #fff;
      margin-bottom: 15px;
      font-size: 18px;
    }

    .footer-column ul {
      list-style: none;
      padding: 0;
      display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .footer-column ul li {
      margin: 10px 0;
    }

    .footer-column ul li a {
      color: #b1bac3;
      text-decoration: none;
      font-size: 16px;
    }

    .footer-column ul li a:hover {
      color: #00b67a; /* Trustpilot green */
    }

    .app-badge img {
      margin-top: 15px;
      width: 140px;
    }

    .social-icons a {
      display: block;
      margin: 12px 0;
      font-size: 18px;
      color: #ccc;
      text-decoration: none;
    }

    .social-icons a:hover {
      color: #00b67a;
    }

    .country-select h4 {
      margin-bottom: 15px;
      color: #fff;
    }

    .country-select select {
      padding: 10px 12px;
      border-radius: 6px;
      border: none;
      font-size: 14px;
      width: 200px;
    }

    .footer-bottom {
      display: flex;
      width: 90%;
        justify-content: space-between;

    }

    .footer-bottom a {
      margin: 0 10px;
       color: #fff;
      text-decoration: none;
       font-size: 14px;
    }

    .footer-bottom a:hover {
      color: #00b67a;
    }




    /* mobile responsive code */



    /* ================== Responsive ================== */

/* Tablets (max-width: 1024px) */
@media (max-width: 1024px) {
  header {
    height: auto;
    padding: 12px 16px;
  }

  .header-container {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }

  .header-top-upper {
    flex-wrap: wrap;
    row-gap: 16px;
    width: 100%;
  }

  .logo {
    width: 30%;
  }

  .header-top-links {
    width: 100%;
  }

  .header-top-icons {
    width: 100%;
    justify-content: center;
  }

  .header-bottom-links ul {
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    width: 100%;
  }

  .company-container {
    flex-direction: column;
  }

  .review-container,
  .rating-container {
    width: 100%;
  }

  .review-card {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .details-section {
    gap: 24px;
  }

  .company-details,
  .company-info {
    flex-direction: column;
    gap: 16px;
  }

  .company-details-header,
  .company-info-header,
  .company-details-content,
  .company-info-content {
    width: 100%;
  }

  .footer-top {
    gap: 40px;
    flex-wrap: wrap;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }
}

/* Mobiles (max-width: 768px) */
@media (max-width: 768px) {
  .logo {
    width: 40%;
  }

  .header-top-upper {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .header-top-icons ul {
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
  }

  .header-top-icons ul li button {
    padding: 0 16px;
    font-size: 12px;
    height: 40px;
  }

  .review-header {
    flex-direction: column;
    text-align: center;
    gap: 20px;
  }

  .review-header-left,
  .review-header-right {
    width: 100%;
  }

  .review-header-right-top {
    width: 100%;
    text-align: center;
  }

  .review-header-right-bottom {
    flex-direction: column;
    gap: 12px;
    width: 100%;
  }

  .review-button,
  .visit-button {
    width: 100%;
    justify-content: center;
  }

  .review-card {
    grid-template-columns: 1fr;
  }

  .main-rating-container {
    flex-direction: column;
    gap: 32px;
  }

  .main-rating-box,
  .main-rating-list {
    width: 100%;
    padding-left: 0;
  }

  .carousel {
    gap: 12px;
  }

  .card {
    min-width: 80%;
  }

  .accordion-container {
    max-width: 100%;
  }

  .footer-top {
    flex-direction: column;
    gap: 32px;
  }

  .footer-column {
    width: 100%;
    text-align: center;
  }

  .social-icons {
    display: flex;
    justify-content: center;
    gap: 16px;
  }

  .country-select select {
    width: 100%;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: 10px;
  }
}

/* Small Mobiles (max-width: 480px) */
@media (max-width: 480px) {
  .logo {
    width: 60%;
  }

  .header-top-links input {
    font-size: 14px;
    height: 40px;
  }

  .review-header-right-top h2 {
    font-size: 24px;
  }

  .review-header-right-top p {
    font-size: 13px;
  }

 

  .company-details-header h3,
  .company-info-header h3 {
    font-size: 18px;
  }

  .pagination li {
    width: auto;
    flex: 1;
  }

  .footer-column h4 {
    font-size: 16px;
  }

  .footer-column ul li a {
    font-size: 14px;
  }
}