/*===============================================================================
   TEMPLATE      : Dynamic Portfolio Interface
   PROJECT       : Laravel SPA
   VERSION       : 1.0.0
   DEVELOPER     : Sujit Das
   DESCRIPTION   : Personal Portfolio using modern frontend & backend stack
   RELEASE DATE  : February 21, 2026
   LICENSE       : MIT
   WEBSITE       : https://ombyte.net
==================================================================== © ombyte.net ======*/

/* =================== 07. RESPONSIVE =================== */
:root {
    --sidebar-width: 25vw;
    --sidebar-bg: #1f1f1f;
    --color-dark: #000; 
    --color-primary: #17c6aa;
    --scrollbar-track: #c4cfde; 
    --scrollbar-thumb: #fff;
}


/*-----=====|| {( START:- RESPONSIVE )} ||=====-----*/
@media (max-width: 1920px) {
   .profile_section {
      display: none;
   }
}



@media (max-width: 1366px) {

   .social_media ul li::after {
      width: 30px;
   }

   .social_media ul li::before {
      right: 30px;
      height: 42px;
   }

   .social_media ul li a::after {
      right: 35px;
      height: 32px;
   }

   .social_media ul li a::before {
      right: 40px;
      height: 22px;
   }

   .social_media::after {
      width: 30px;
   }

   .social_media::before {
      left: 30px;
   }

   .social_media ul::after {
      left: 35px;
      height: 32px;
   }

   .social_media ul::before {
      left: 40px;
      height: 22px;
   }

   .home_part {
      width: 985px;
      margin: 120px 0px 70px 20px;
   }

   .about_part {
      width: 985px;
      margin: 120px 0px 70px 20px;
   }

   .experience_part {
      width: 985px;
      margin: 120px 0px 70px 20px; 
   }

   .experience_item.left .icon {
      margin-right: 0px;
   }

   .experience_item .icon i {
      margin-left: 0px;
   }

   .gallery_part {
      width: 985px;
      margin: 120px 0px 70px 20px; 
   }

   .gallery {
      margin-left: 70px;
   }

   .gallery-item:nth-child(3n) {
      margin-left: 0px;
   }

   .gallery-item:nth-child(4n) {
      margin-left: 15px;
   }

   .gallery-item:nth-child(5n) {
      margin-left: 0px;
   }

   .service_part {
      width: 985px;
      margin: 120px 0px 70px 20px;
   }

   .work_part {
      width: 985px;
      margin: 120px 0px 70px 20px;
   }

   .testimonial_part {
      width: 985px;
      margin: 120px 0px 70px 20px;
   }

   .review_image {
      width: 350px;
      height: 400px;
   }

   .reviewer_info {
      margin-left: 150px;
   }

   .blog_part {
      width: 985px;
      margin: 120px 0px 70px 20px;
   }

   .blog_card_data::after {
      display: none;
   }

   .blog_card_data {
      width: 160px;
      height: 35px;
      top: 30px;
      left: 30px;
      transform: rotate(0deg);
   }

   .blog_card a h4 {
      width: fit-content;
   }

   .blog_card a p {
      width: fit-content;
   }

   .faq_part {
      width: 985px;
      margin: 120px 0px 70px 20px;
   }

   .contact_part {
      width: 985px;
      margin: 120px 0px 70px 20px;
   }
}



@media (max-width: 1024px) {
   .logo {
      display: table;
      margin: auto;
   }

   .logo a img {
      display: table;
      margin: auto;
   }

   .layout_container {
      display: flex;
      flex-direction: column;
   }

   .layout_sidebar {
      display: none;
   }

   .profile_section {
      display: block;
   }

   .secend_profile_widget {
      width: 820px;
   }

   .secend_logo_text {
      margin-right: 230px;
   }

   .secend_profile h2 {
      font-size: 26px;
   }
   
   .sidebar_menu  {
      top: 45px;
   }

   .navBars {
      display: none;
   }

   .profile_intro p {
      text-align: justify;
   }

   .home_part {
      width: 850px;
      margin: 40px 0px 70px 35px;
   }

   .skills_section {
      margin-left: 0px;
   }

   .social_media ul li::after {
      display: none;
   }

   .social_media ul li::before {
      display: none;
   }

   .social_media ul li a::after {
      display: none;
   }

   .social_media ul li a::before {
      display: none;
   }

   .social_media::after {
      display: none;
   }

   .social_media::before {
      display: none;
   }

   .social_media ul::after {
      display: none;
   }

   .social_media ul::before {
      display: none;
   }

   .gallery-item:nth-child(6n) {
      margin-left: 15px;
   }

   .about_part {
      width: 850px;
      margin: 40px 0px 70px 35px;
   }

   .personal_info_list li span {
      width: 140px;
   }

   .experience_part {
      width: 850px;
      margin: 40px 0px 70px 35px;
   }

   .gallery_part {
      width: 850px;
      margin: 40px 0px 70px 35px;
   }

   .gallery {
      margin-left: 100px;
   }

   .filter-buttons button {
      padding: 10px 20px;
   }

   .gallery-item {
      width: 300px;
   }

   .service_part {
      width: 850px;
      margin: 40px 0px 70px 35px;
   }

   .service_img_cart {
      display: none;
   }

   .my_services_section {
      margin-top: 30px;
   }

   .service_point {
      margin-left: 0px;
   }

   .work_part {
      width: 850px;
      margin: 40px 0px 70px 35px;
   }

   .testimonial_part {
      width: 850px;
      margin: 40px 0px 70px 35px;
   }

   .testmional_card {
      display: block;     
      margin: 50px auto 30px auto;
      width: 300px;         
   }

   .reviewer_info {
      height: auto;              
      display: flex;
      flex-direction: column;
      justify-content: center;   
      align-items: center;      
      margin: 0 auto;            
   }

   .blog_part {
      width: 850px;
      margin: 40px 0px 70px 35px;
   }

   .faq_part {
      width: 850px;
      margin: 40px 0px 70px 35px;
   }

   .contact_part {
      width: 850px;
      margin: 40px 0px 70px 35px;
   }

   .blog_heading {
      margin: 50px 0px 30px 0px;
   }

   .my_blog {
      margin-left: 0px;
   }

   .author_info {
      margin-left: 0px;
   }

   .blog_content {
      margin-left: 0px;
   }

   .you_may_like {
      margin-right: 0px;
   }

   .blog_share {
      margin-right: 0px;
   }
}



@media (max-width: 768px) {

}



@media (max-width: 640px) {

}



@media (max-width: 480px) {

}
/*-----=====|| {( END:- RESPONSIVE )} ||=====-----*/