/*===============================================================================
   TEMPLATE      : Dynamic Portfolio Interface
   PROJECT       : Laravel SPA
   VERSION       : 1.0.4
   DEVELOPER     : Sujit Das
   DESCRIPTION   : Personal Portfolio using modern frontend & backend stack
   RELEASE DATE  : August 2025
   LICENSE       : MIT
   WEBSITE       : https://ombit.net
==================================================================== © ombit.net ======*/


/* =================== 07. RESPONSIVE =================== */

/* ---------- ROOT VARIABLES ---------- */
:root {
    /* Base Colors */
    --color-black: #000;
    --color-white: #fff;

    /* Brand / Theme */
    --color-primary: #0dc143;

    /* UI / Layout */
    --color-sidebar-bg: #1f1f1f;

    /* Scrollbar */
    --color-scrollbar-track: #ccc;
    --color-scrollbar-thumb: #fff;

    /* Others */
    --color-red: #f00;
    --color-view: #3598db;
}






/* ----------Mobile Devices (480px – 640px) ---------- */
@media screen and (min-width: 480px) {

}



@media screen and (max-width: 640px) {

}




/* ---------- Laptop Devices (768px – 1024px) ---------- */



@media screen and (min-width: 768px) {
    .navbar-toggler {
        background-color: var(--color-primary);
    }

    .newsletter form input {
        width: 625px;
    }

    .contact_page {
      margin-bottom: 0px;
    }
    
    .bg_login {
      top: 30%;
    }

    .nav-link {
      font-size: 18px;
    }

    .layout_auth {
      background-color: var(--color-sidebar-bg);
      padding: 30px;
      margin-top: 50px;
    }

    .form_fild input {
      width: 100%;
      background-color: var(--color-black);
    }

    .layout_auth {
      margin-top: 50px;
    }

    .form_fild_btn button {
      width: 100%;
    }

    .layout_auth {
      border: none;
    }

    .layout_reg {
      margin-top: 30px !important;
    }

    .msg_usr_field button {
      margin-bottom: 50px;
    }

    .product_reviews {
      margin-top: 50px;
    }

    .quantity_design {
      width: 120px;
      display: table;
      margin: auto;
      background-color: transparent;
    }

    .checkout_summary {
      margin-top: 82px;
      margin-bottom: 120px;
    }

    .bg_login {
      height: 800px;
    }

    .layout_auth {
      margin-top: 200px !important;
    }

    .loging_text img {
      height: 800px;
    }

    .product_btn a {
      font-size: 18px;
    }

    .popup_box a {
      font-size: 18px;
    }

    .popup_box button {
      font-size: 18px;
    }

    .logo_nav span {
      font-size: 20px;
    }

    .popup_box h6 {
      font-size: 18px;
    }

    .popup_box p {
      font-size: 18px;
    }

    .featured_heading p {
      font-size: 18px;
    }

    .red_more_btn a {
      font-size: 18px;
    }

    .product_btn button {
      font-size: 18px;
    }

    .footer_social {
      margin-top: 50px;
    }

    .contact_info ul li p {
      font-size: 18px;
    }

    .footer_links ul li {
      font-size: 18px;
    }

    .contact_info ul li p span {
      font-size: 18px;
    }

    .newsletter h4 {
      font-size: 18px;
    }

    .contact_location p {
      font-size: 18px;
    }

    .product_description_details p span {
      font-size: 18px;
    }

    .product_description_details p b {
      font-size: 18px;
    }

    .product_description_details table tr td {
      font-size: 18px;
    }

    .product_description_details button {
      font-size: 18px;
    }

    .text_muted {
      font-size: 18px;
    }

    .related_subtitle {
      font-size: 18px;
    }

    .cart_pr_details h6 {
      font-size: 18px;
    }

    .cart_pr_details ul li {
      font-size: 18px;
    }

    .quantity_design button {
      width: 50px;
      height: 50px;
    }

    .quantity_design {
      width: 180px;
    }

    .quantity_design input {
      height: 50px;
    }

    .remove_btn {
      font-size: 22px;
    }

    .summary_item {
      font-size: 18px;
    }

    .checkout_header p {
      font-size: 18px;
    }

    .payment_instruction p {
      font-size: 18px;
    }

    .payment_instruction ul {
      font-size: 18px;
    }

    .checkout_field label {
      font-size: 18px;
    }

    .order_btn {
      font-size: 18px;
    }

    .item_info h6 {
      font-size: 18px;
    }

    .item_info p {
      font-size: 18px;
    }

    .total_row {
      font-size: 18px;
    }

    .layout_auth p {
      font-size: 18px;
    }

    .forgot_link_custom {
      font-size: 18px;
    }

    .form_fild_btn button {
      font-size: 18px;
    }

    .broudcump_user ul li {
      font-size: 18px;
    }

    .dashboard_nav ul li a {
      font-size: 18px;
    }

    .profile_cart h5 {
      font-size: 20px;
    }

    .profile_cart p {
      font-size: 18px;
    }

    .profile_cart {
      margin-bottom: 50px;
    }
}


@media screen and (min-width: 1024px) {
    .navbar-expand-lg .navbar-nav .nav-link {
        margin-left: 0px;
    }
    .newsletter form input {
        width: 225px;
    }

    .footer_social {
      margin-top: 0px;
    }

    .contact_info ul li p span {
      font-size: 16px;
    }

    .nav-link {
      font-size: 16px;
    }

    .layout_container::after {
      left: 520px;
    }

    .back_to_home {
      top: 30px;
      left: 600px;
    }

    .bg_login {
      height: 600px;
      top: 50%;
    }

    .related_subtitle {
      font-size: 16px;
    }

    .loging_text img {
      height: auto;
    }

    .form_fild input {
      width: 100%;
    }

    .form_fild_btn button {
      width: 100%;
    }

    .layout_reg {
      margin-top: -10px !important;
    }

    .cart_dashboard span {
      font-size: 16px;
    }

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

    .dashboard_nav ul li a i {
      margin-right: 10px;
    }

    .msg_usr_field button {
      margin-bottom: 50px;
    }

    .product_description_details button {
      margin-bottom: 50px;
    }

    .nav_right {
      margin-left: 0px;
    }

    .product_btn a {
      font-size: 16px;
    }

    .popup_box a {
      font-size: 16px;
    }

    .popup_box button {
      font-size: 16px;
    }

    .logo_nav span {
      font-size: 18px;
    }

    .popup_box h6 {
      font-size: 16px;
    }

    .popup_box p {
      font-size: 16px;
    }

    .featured_heading p {
      font-size: 16px;
    }

    .red_more_btn a {
      font-size: 16px;
    }

    .contact_info ul li p {
      font-size: 16px;
    }

    .footer_links ul li {
      font-size: 16px;
    }

    .newsletter h4 {
      font-size: 16px;
    }

    .contact_location p {
      font-size: 16px;
    }

    .product_description_details p span {
      font-size: 16px;
    }

    .product_description_details p b {
      font-size: 16px;
    } 

    .product_description_details table tr td {
      font-size: 16px;
    }

    .product_description_details button {
      font-size: 16px;
    }

    .text_muted {
      font-size: 16px;
    }

    .cart_pr_details h6 {
      font-size: 16px;
    }

    .cart_pr_details ul li {
      font-size: 16px;
    } 

    .quantity_design button {
      width: 30px;
      height: 30px;
    }

    .quantity_design {
      width: 120px;
    }

    .quantity_design input {
      height: 30px;
    }

    .remove_btn {
      font-size: 16px;
    }

    .summary_item {
      font-size: 16px;
    }

    .checkout_header p {
      font-size: 16px;
    }

    .payment_instruction p {
      font-size: 16px;
    }

    .payment_instruction ul {
      font-size: 16px;
    }

    .checkout_field label {
      font-size: 16px;
    }

    .order_btn {
      font-size: 16px;
    }

    .item_info h6 {
      font-size: 16px;
    }

    .item_info p {
      font-size: 16px;
    }

    .layout_auth p {
      font-size: 16px;
    }

    .forgot_link_custom {
      font-size: 16px;
    }

    .form_fild_btn button {
      font-size: 16px;
    }

    .broudcump_user ul li {
      font-size: 16px;
    }

    .dashboard_nav ul li a {
      font-size: 16px;
    }

    .profile_cart h5 {
      font-size: 18px;
    }

    .profile_cart p {
      font-size: 16px;
    }

    .profile_cart {
      margin-bottom: 0px;
    }
}



/* ---------- Desktop Devices (1366px) ---------- */
@media screen and (min-width: 1366px) {
    .newsletter form input {
        width: 285px;
    }

    .nav-link {
      font-size: 16px;
    }

    .contact_info ul li p span {
      font-size: 16px;
    }

    .layout_container::after {
        left: 215px;
    }

    .related_subtitle {
      font-size: 16px;
    }

    .back_to_home {
      left: 315px;
    }

    .form_fild input {
      width: 100%;
    }

    .form_fild_btn button {
      width: 100%;
    }

    .layout_reg {
      margin-top: -10px !important;
    }

    .msg_usr_field button {
      margin-bottom: 50px;
    }

    .bg_login {
      height: 600px;
    }

    .layout_auth {
      margin-top: 70px !important;
    }

    .loging_text img {
      height: auto;
    }

    .nav_right {
      margin-left: 70px;
    }

    .product_btn a {
      font-size: 14px;
    }

    .popup_box a {
      font-size: 16px;
    }

    .popup_box button {
      font-size: 16px;
    }

    .logo_nav span {
      font-size: 18px;
    }

    .popup_box h6 {
      font-size: 16px;
    }

    .popup_box p {
      font-size: 16px;
    }

    .featured_heading p {
      font-size: 16px;
    }

    .red_more_btn a {
      font-size: 16px;
    }

    .product_btn button {
      font-size: 14px;
    }

    .contact_info ul li p {
      font-size: 16px;
    }

    .footer_links ul li {
      font-size: 16px;
    }

    .newsletter h4 {
      font-size: 16px;
    }

    .contact_location p {
      font-size: 16px;
    } 

    .product_description_details p span {
      font-size: 16px;
    }

    .product_description_details p b {
      font-size: 16px;
    } 

    .product_description_details table tr td {
      font-size: 16px;
    }

    .product_description_details button {
      font-size: 16px;
    }

    .text_muted {
      font-size: 16px;
    }

    .cart_pr_details h6 {
      font-size: 16px;
    }

    .cart_pr_details ul li {
      font-size: 16px;
    } 

    .quantity_design button {
      width: 30px;
      height: 30px;
    }

    .quantity_design {
      width: 120px;
    }

    .quantity_design input {
      height: 30px;
    }

    .remove_btn {
      font-size: 16px;
    }

    .summary_item {
      font-size: 16px;
    }

    .checkout_header p {
      font-size: 16px;
    }

    .payment_instruction p {
      font-size: 16px;
    }

    .payment_instruction ul {
      font-size: 16px;
    }

    .checkout_field label {
      font-size: 16px;
    }

    .order_btn {
      font-size: 16px;
    }

    .item_info h6 {
      font-size: 16px;
    }

    .item_info p {
      font-size: 16px;
    }

    .total_row {
      font-size: 16px;
    }

    .layout_auth p {
      font-size: 16px;
    }

    .forgot_link_custom {
      font-size: 16px;
    }

    .form_fild_btn button {
      font-size: 16px;
    }

    .broudcump_user ul li {
      font-size: 16px;
    }

    .dashboard_nav ul li a {
      font-size: 16px;
    }

    .profile_cart h5 {
      font-size: 18px;
    }

    .profile_cart p {
      font-size: 16px;
    }

    .profile_cart {
      margin-bottom: 0px;
    }
}



@media screen and (min-width: 1920px) {
    .newsletter form input {
        width: 345px;
    }

    .related_subtitle {
      font-size: 16px;
    }

    .navbar-expand-lg .navbar-nav .nav-link {
        margin-left: 15px;
    }

    .contact_info ul li p span {
      font-size: 16px;
    }

    .newsletter h4 {
      font-size: 16px;
    }

    .nav-link {
      font-size: 16px;
    }

    .dashboard_nav ul li a {
      font-size: 16px;
    }

    .product_btn a {
      font-size: 16px;
       padding: 7px 15px;
    }

    .product_btn button {
      font-size: 16px;
      padding: 7px 15px;
    }

    .layout_container::after {
        left: 490px;
    }

    .back_to_home {
      top: 50px;
      left: 490px;
    }

    .form_fild input {
      width: 100%;
    }

    .layout_auth {
      margin-top: 80px;
    }

    .product_description_details button {
      font-size: 16px;
    }

    .form_fild_btn button {
      width: 100%;
    }

    .layout_auth {
      border: block;
    }

    .layout_reg {
      margin-top: -10px !important;
    }

    .msg_usr_field button {
      margin-bottom: 50px;
    }
    
    .quantity_design {
      background-color: var(--color-scrollbar-track);
    }

    .bg_login {
      height: 600px;
    }

    .layout_auth {
      margin-top: 70px !important;
    }

    .loging_text img {
      height: auto;
    }

    .nav_right {
      margin-left: 70px;
    }

    .popup_box a {
      font-size: 16px;
    }

    .popup_box button {
      font-size: 16px;
    }

    .logo_nav span {
      font-size: 18px;
    }

    .popup_box h6 {
      font-size: 16px;
    }

    .popup_box p {
      font-size: 16px;
    }

    .featured_heading p {
      font-size: 16px;
    }

    .red_more_btn a {
      font-size: 16px;
    }

    .contact_info ul li p {
      font-size: 16px;
    }

    .footer_links ul li {
      font-size: 16px;
    }

    .contact_location p {
      font-size: 16px;
    }

    .product_description_details p span {
      font-size: 16px;
    }

    .product_description_details p b {
      font-size: 16px;
    } 

    .product_description_details table tr td {
      font-size: 16px;
    }

    .text_muted {
      font-size: 16px;
    }

    .cart_pr_details h6 {
      font-size: 16px;
    }

    .cart_pr_details ul li {
      font-size: 16px;
    } 

    .quantity_design button {
      width: 30px;
      height: 30px;
    }

    .quantity_design input {
      height: 30px;
    }

    .quantity_design {
      width: 120px;
    }

    .remove_btn {
      font-size: 16px;
    }

    .summary_item {
      font-size: 16px;
    }

    .checkout_header p {
      font-size: 16px;
    }

    .payment_instruction p {
      font-size: 16px;
    }

    .payment_instruction ul {
      font-size: 16px;
    }

    .checkout_field label {
      font-size: 16px;
    }

    .order_btn {
      font-size: 16px;
    }

    .item_info h6 {
      font-size: 16px;
    }

    .item_info p {
      font-size: 16px;
    }

    .total_row {
      font-size: 16px;
    }

    .layout_auth p {
      font-size: 16px;
    }

    .forgot_link_custom {
      font-size: 16px;
    }

    .form_fild_btn button {
      font-size: 16px;
    }

    .broudcump_user ul li {
      font-size: 16px;
    }

    .dashboard_nav ul li a {
      font-size: 16px;
    }

    .profile_cart h5 {
      font-size: 18px;
    }

    .profile_cart p {
      font-size: 16px;
    }

    .profile_cart {
      margin-bottom: 0px;
    }
}