/*==================================================== HOME PAGE RESPONSIVE PART 1 : HERO SECTION ====================================================*/ /*==================================== Large Desktop (1600px - 2560px) ====================================*/ @media (min-width:1600px){ .ifd-hero{ min-height:950px; padding:120px 0; } .ifd-hero-content h1{ font-size:72px; line-height:1.15; } .ifd-hero-content p{ font-size:20px; max-width:650px; } .ifd-hero-buttons{ gap:24px; margin-top:40px; } .ifd-hero-image{ max-width:650px; } } /*==================================== Laptop ====================================*/ @media (max-width:1400px){ .ifd-hero{ padding:90px 0; } .ifd-hero-content h1{ font-size:56px; } .ifd-hero-content p{ font-size:17px; } } /*==================================== 1200px ====================================*/ @media (max-width:1200px){ .ifd-hero{ padding:80px 0; } .ifd-hero-content h1{ font-size:48px; } .ifd-hero-content p{ font-size:16px; } .ifd-hero-buttons{ gap:15px; flex-wrap:wrap; } } /*==================================== Tablet ====================================*/ @media (max-width:992px){ .ifd-hero{ padding:70px 0; } .ifd-hero-container{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:50px; } .ifd-left{ width:100%; max-width:700px; } .ifd-right{ width:100%; display:flex; justify-content:center; } .ifd-hero-content h1{ font-size:42px; line-height:1.2; } .ifd-hero-content p{ margin:auto; margin-top:20px; } .ifd-hero-buttons{ justify-content:center; } .ifd-stage{ display:none; } } /*==================================== 768px ====================================*/ @media (max-width:768px){ .ifd-hero{ padding:60px 0; } .ifd-hero-content h1{ font-size:36px; } .ifd-hero-content p{ font-size:15px; } .ifd-hero-buttons{ flex-direction:column; align-items:center; width:100%; } .ifd-hero-buttons a{ width:260px; text-align:center; } } /*==================================== 576px ====================================*/ @media (max-width:576px){ .ifd-hero{ padding:50px 15px; } .ifd-hero-content h1{ font-size:32px; } .ifd-hero-content p{ font-size:14px; } } /*==================================== 480px ====================================*/ @media (max-width:480px){ .ifd-hero-content h1{ font-size:28px; line-height:1.3; } .ifd-hero-content p{ font-size:14px; } .ifd-hero-buttons a{ width:100%; } } /*==================================== 375px ====================================*/ @media (max-width:375px){ .ifd-hero-content h1{ font-size:25px; } } /*==================================== 320px ====================================*/ @media (min-width:320px) and (max-width:400px){ .ifd-hero{ padding:40px 10px; } .ifd-hero-content h1{ font-size:22px; } .ifd-hero-content p{ font-size:13px; } .ifd-heading{ font-size:40px; } } /*==================================================== HOME RESPONSIVE PART 2 : HERO RIGHT SECTION ====================================================*/ /*==================================== Large Desktop ====================================*/ @media (min-width:1600px){ .ifd-right{ display:flex; justify-content:center; align-items:center; } .ifd-hero-image{ width:650px; max-width:100%; } .ifd-circle{ transform:scale(1.15); } } /*==================================== 1400px ====================================*/ @media (max-width:1400px){ .ifd-hero-image{ width:540px; } } /*==================================== 1200px ====================================*/ @media (max-width:1200px){ .ifd-right{ display:flex; justify-content:center; align-items:center; } .ifd-hero-image{ width:500px; max-width:100%; } } /*==================================== 992px ====================================*/ @media (max-width:992px){ .ifd-right{ width:100%; margin-top:40px; } .ifd-hero-image{ width:430px; max-width:90%; } } /*==================================== 768px ====================================*/ @media (max-width:768px){ .ifd-right{ margin-top:30px; } .ifd-hero-image{ width:360px; max-width:90%; } } /*==================================== 576px ====================================*/ @media (max-width:576px){ .ifd-hero-image{ width:300px; } } /*==================================== 480px ====================================*/ @media (max-width:480px){ .ifd-hero-image{ width:260px; } } /*==================================== 375px ====================================*/ @media (max-width:375px){ .ifd-hero-image{ width:220px; } } /*==================================== 320px ====================================*/ @media (max-width:320px){ .ifd-hero-image{ width:190px; } } @media(min-width:320px) and (max-width:1080px){ .ifd-item{ display:none; } } /*==================================== Floating Products ====================================*/ @media (max-width:992px){ .ifd-floating-item{ transform:scale(.85); } } @media (max-width:768px){ .ifd-floating-item{ transform:scale(.72); } } @media (max-width:576px){ .ifd-floating-item{ transform:scale(.60); } } @media (max-width:480px){ .ifd-floating-item{ transform:scale(.50); } } /*==================================== Decorative Shapes ====================================*/ @media (max-width:768px){ .ifd-circle, .ifd-ring, .ifd-blob{ transform:scale(.80); } } @media (max-width:576px){ .ifd-circle, .ifd-ring, .ifd-blob{ transform:scale(.65); } } @media (max-width:480px){ .ifd-circle, .ifd-ring, .ifd-blob{ display:none; } } /*==================================== Animations ====================================*/ @media (prefers-reduced-motion:reduce){ .ifd-floating-item, .ifd-circle, .ifd-ring, .ifd-blob, .ifd-hero-image{ animation:none !important; transition:none !important; } } /*==================================================== HOME RESPONSIVE PART 3 : HERO STATS & FINAL OPTIMIZATION ====================================================*/ /*==================================== Hero Statistics ====================================*/ @media (max-width:1200px){ .ifd-hero-stats{ gap:30px; margin-top:45px; flex-wrap:wrap; } .ifd-stat{ min-width:150px; } } @media (max-width:992px){ .ifd-hero-stats{ justify-content:center; text-align:center; gap:25px; } .ifd-stat{ width:45%; } } @media (max-width:768px){ .ifd-hero-stats{ display:grid; grid-template-columns: repeat(2,1fr); gap:20px; width:100%; } .ifd-stat{ width:100%; } .ifd-stat-number{ font-size:34px; } } @media (max-width:576px){ .ifd-hero-stats{ grid-template-columns:1fr; } .ifd-stat{ padding:18px; } .ifd-stat-number{ font-size:30px; } } /*==================================== Hero Badges ====================================*/ @media (max-width:992px){ .ifd-badge{ transform:scale(.90); } } @media (max-width:768px){ .ifd-badge{ position:relative; inset:auto; margin:10px auto; display:inline-flex; } } @media (max-width:576px){ .ifd-badge{ width:90%; justify-content:center; } } /*==================================== Trust Icons ====================================*/ @media (max-width:768px){ .ifd-trust-list{ justify-content:center; flex-wrap:wrap; gap:15px; } } @media (max-width:480px){ .ifd-trust-list{ flex-direction:column; align-items:center; } } /*==================================== Hero Buttons ====================================*/ @media (max-width:576px){ .ifd-hero-buttons{ gap:15px; } .ifd-hero-buttons .btn, .ifd-hero-buttons a{ width:100%; max-width:320px; } } /*==================================== Spacing Improvements ====================================*/ @media (max-width:768px){ .ifd-left>*{ margin-left:auto; margin-right:auto; } } @media (max-width:480px){ .ifd-left{ padding-inline:8px; } } /*==================================== Prevent Overflow ====================================*/ @media (max-width:768px){ .ifd-hero, .ifd-container, .ifd-left, .ifd-right{ overflow:hidden; } } /*==================================== Landscape Phones ====================================*/ @media (max-height:600px) and (orientation:landscape){ .ifd-hero{ padding:40px 0; } .ifd-hero-container{ gap:25px; } .ifd-hero-content h1{ font-size:32px; } .ifd-hero-image{ width:260px; } } /*==================================== Ultra Small Devices ====================================*/ @media (max-width:360px){ .ifd-hero-content h1{ font-size:22px; line-height:1.3; } .ifd-hero-content p{ font-size:13px; } .ifd-stat-number{ font-size:26px; } } /*==================================== Very Large Screens ====================================*/ @media (min-width:1920px){ .ifd-hero{ min-height:1000px; } .ifd-hero-content{ max-width:720px; } .ifd-hero-content h1{ font-size:78px; } .ifd-hero-content p{ font-size:22px; } .ifd-hero-image{ width:700px; } } /*==================================== Accessibility ====================================*/ @media (prefers-reduced-motion:reduce){ .ifd-hero *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; } } /*==================================================== HOME RESPONSIVE PART 4 : PRODUCT CATEGORIES ====================================================*/ /*==================================== Large Desktop ====================================*/ @media (min-width:1600px){ .inamcatsec{ padding:120px 0; } .inamcatsec-title{ font-size:58px; } .inamcatsec-subtitle{ max-width:900px; margin:auto; font-size:20px; } } /*==================================== 1400px ====================================*/ @media (max-width:1400px){ .inamcatsec{ padding:100px 0; } } /*==================================== 1200px ====================================*/ @media (max-width:1200px){ .inamcatsec-grid{ grid-template-columns: repeat(3,1fr); gap:30px; } } /*==================================== 992px ====================================*/ @media (max-width:992px){ .inamcatsec{ padding:80px 0; } .inamcatsec-grid{ grid-template-columns: repeat(2,1fr); gap:25px; } .inamcatsec-title{ font-size:42px; text-align:center; } .inamcatsec-subtitle{ text-align:center; max-width:700px; margin:auto; } } /*==================================== 768px ====================================*/ @media (max-width:768px){ .inamcatsec{ padding:70px 20px; } .inamcatsec-grid{ grid-template-columns:1fr; gap:24px; } .inamcat-card{ max-width:500px; width:100%; margin:auto; } .inamcatsec-title{ font-size:36px; } .inamcatsec-subtitle{ font-size:15px; } } /*==================================== 576px ====================================*/ @media (max-width:576px){ .inamcatsec{ padding:60px 15px; } .inamcat-card{ padding:25px; } .inamcat-card img{ width:90px; height:90px; } .inamcat-card h3{ font-size:22px; } } /*==================================== 480px ====================================*/ @media (max-width:480px){ .inamcatsec-title{ font-size:30px; } .inamcat-card{ padding:20px; } .inamcat-card img{ width:80px; height:80px; } .inamcat-card h3{ font-size:20px; } .inamcat-card p{ font-size:14px; } } /*==================================== 375px ====================================*/ @media (max-width:375px){ .inamcatsec-title{ font-size:26px; } .inamcat-card{ padding:18px; } } /*==================================== 320px ====================================*/ @media (max-width:320px){ .inamcatsec{ padding:50px 10px; } .inamcatsec-title{ font-size:24px; } .inamcat-card{ padding:16px; } .inamcat-card img{ width:70px; height:70px; } } /*==================================== Category Buttons ====================================*/ @media (max-width:768px){ .inamcat-card .btn, .inamcat-card a{ width:100%; text-align:center; } } /*==================================== Hover Effects ====================================*/ @media (hover:none){ .inamcat-card:hover{ transform:none; } } /*==================================== Overflow Fix ====================================*/ @media (max-width:768px){ .inamcatsec, .inamcatsec-grid{ overflow:hidden; } } /*==================================================== HOME RESPONSIVE PART 5 : PRODUCT FORM SECTION ====================================================*/ /*==================================== Large Desktop ====================================*/ @media (min-width:1600px){ .inamformsec{ padding:120px 0; } .inamformsec-title{ font-size:58px; } .inamformsec-subtitle{ max-width:850px; margin:auto; font-size:20px; } } /*==================================== 1400px ====================================*/ @media (max-width:1400px){ .inamformsec{ padding:100px 0; } } /*==================================== 1200px ====================================*/ @media (max-width:1200px){ .inamform-wrapper{ gap:40px; } } /*==================================== 992px ====================================*/ @media (max-width:992px){ .inamform-wrapper{ display:flex; flex-direction:column; gap:40px; } .inamform-left, .inamform-right{ width:100%; max-width:100%; } .inamformsec-title{ text-align:center; font-size:42px; } .inamformsec-subtitle{ text-align:center; } } /*==================================== 768px ====================================*/ @media (max-width:768px){ .inamformsec{ padding:70px 20px; } .inamform-card{ padding:30px; } .inamformsec-title{ font-size:36px; } .inamform-grid{ grid-template-columns:1fr; gap:20px; } } /*==================================== 576px ====================================*/ @media (max-width:576px){ .inamformsec{ padding:60px 15px; } .inamform-card{ padding:25px; } .inamform-card h3{ font-size:24px; } } /*==================================== 480px ====================================*/ @media (max-width:480px){ .inamformsec-title{ font-size:30px; } .inamform-card{ padding:20px; border-radius:18px; } } /*==================================== 375px ====================================*/ @media (max-width:375px){ .inamform-card{ padding:18px; } .inamformsec-title{ font-size:26px; } } /*==================================== 320px ====================================*/ @media (max-width:320px){ .inamformsec{ padding:50px 10px; } .inamform-card{ padding:15px; } .inamformsec-title{ font-size:24px; } } /*==================================== Input Fields ====================================*/ @media (max-width:768px){ .inamform-card input, .inamform-card select, .inamform-card textarea{ width:100%; font-size:15px; } } /*==================================== Buttons ====================================*/ @media (max-width:768px){ .inamform-card button, .inamform-card .btn{ width:100%; } } /*==================================== Images ====================================*/ @media (max-width:768px){ .inamform-image img{ width:100%; height:auto; display:block; } } /*==================================== Cards ====================================*/ @media (max-width:992px){ .inamform-feature-card{ margin-bottom:20px; } } /*==================================== Touch Devices ====================================*/ @media (hover:none){ .inamform-card:hover, .inamform-feature-card:hover{ transform:none; } } /*==================================== Overflow ====================================*/ @media (max-width:768px){ .inamformsec, .inamform-wrapper{ overflow:hidden; } } /*==================================================== HOME RESPONSIVE PART 6 : TRUST / ABOUT SECTION ====================================================*/ /*==================================== Large Desktop ====================================*/ @media (min-width:1600px){ .inamtrust{ padding:120px 0; } .inamtrust-title{ font-size:58px; } .inamtrust-subtitle{ font-size:20px; max-width:850px; margin:auto; } .inamtrust-image{ max-width:700px; } } /*==================================== 1400px ====================================*/ @media (max-width:1400px){ .inamtrust{ padding:100px 0; } } /*==================================== 1200px ====================================*/ @media (max-width:1200px){ .inamtrust-wrapper{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; } } /*==================================== 992px ====================================*/ @media (max-width:992px){ .inamtrust-wrapper{ display:flex; flex-direction:column; gap:45px; text-align:center; } .inamtrust-left, .inamtrust-right{ width:100%; max-width:100%; } .inamtrust-title{ font-size:42px; } .inamtrust-subtitle{ margin:auto; } } /*==================================== 768px ====================================*/ @media (max-width:768px){ .inamtrust{ padding:70px 20px; } .inamtrust-title{ font-size:36px; } .inamtrust-image{ width:100%; max-width:450px; margin:auto; } } /*==================================== 576px ====================================*/ @media (max-width:576px){ .inamtrust{ padding:60px 15px; } .inamtrust-title{ font-size:30px; } .inamtrust-card{ padding:22px; } } /*==================================== 480px ====================================*/ @media (max-width:480px){ .inamtrust-title{ font-size:28px; } .inamtrust-card{ padding:20px; border-radius:18px; } } /*==================================== 375px ====================================*/ @media (max-width:375px){ .inamtrust-title{ font-size:25px; } .inamtrust-card{ padding:18px; } } /*==================================== 320px ====================================*/ @media (max-width:320px){ .inamtrust{ padding:50px 10px; } .inamtrust-title{ font-size:22px; } .inamtrust-card{ padding:15px; } } /*==================================== Feature Cards ====================================*/ @media (max-width:992px){ .inamtrust-features{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; } } @media (max-width:576px){ .inamtrust-features{ grid-template-columns:1fr; } } /*==================================== Statistics ====================================*/ @media (max-width:768px){ .inamtrust-stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; } } @media (max-width:480px){ .inamtrust-stats{ grid-template-columns:1fr; } } /*==================================== Icons ====================================*/ @media (max-width:576px){ .inamtrust-icon{ width:60px; height:60px; } } /*==================================== Buttons ====================================*/ @media (max-width:768px){ .inamtrust .btn, .inamtrust a.btn{ width:100%; max-width:320px; margin:auto; } } /*==================================== Images ====================================*/ @media (max-width:768px){ .inamtrust img{ max-width:100%; height:auto; display:block; } } /*==================================== Hover Disable ====================================*/ @media (hover:none){ .inamtrust-card:hover{ transform:none; } } /*==================================== Overflow Protection ====================================*/ @media (max-width:768px){ .inamtrust, .inamtrust-wrapper{ overflow:hidden; } } /*==================================== Accessibility ====================================*/ @media (prefers-reduced-motion:reduce){ .inamtrust *{ animation:none !important; transition:none !important; } } /*==================================================== HOME RESPONSIVE PART 7 : ORIGIN MAP & EXPORT SECTION ====================================================*/ /*==================================== Large Desktop ====================================*/ @media (min-width:1600px){ .inamorigin{ padding:120px 0; } .inamorigin-title{ font-size:58px; } .inamorigin-subtitle{ max-width:900px; margin:auto; font-size:20px; } .inamorigin-map{ max-width:850px; margin:auto; } } /*==================================== 1400px ====================================*/ @media (max-width:1400px){ .inamorigin{ padding:100px 0; } } /*==================================== 1200px ====================================*/ @media (max-width:1200px){ .inamorigin-wrapper{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; } } /*==================================== 992px ====================================*/ @media (max-width:992px){ .inamorigin-wrapper{ display:flex; flex-direction:column; text-align:center; gap:45px; } .inamorigin-left, .inamorigin-right{ width:100%; } .inamorigin-title{ font-size:42px; } .inamorigin-subtitle{ margin:auto; } } /*==================================== 768px ====================================*/ @media (max-width:768px){ .inamorigin{ padding:70px 20px; } .inamorigin-title{ font-size:36px; } .inamorigin-map{ width:100%; max-width:500px; margin:auto; } } /*==================================== 576px ====================================*/ @media (max-width:576px){ .inamorigin{ padding:60px 15px; } .inamorigin-title{ font-size:30px; } } /*==================================== 480px ====================================*/ @media (max-width:480px){ .inamorigin-title{ font-size:28px; } .inamorigin-map{ max-width:100%; } } /*==================================== 375px ====================================*/ @media (max-width:375px){ .inamorigin-title{ font-size:25px; } } /*==================================== 320px ====================================*/ @media (max-width:320px){ .inamorigin{ padding:50px 10px; } .inamorigin-title{ font-size:22px; } } /*==================================== Map Image ====================================*/ @media (max-width:768px){ .inamorigin-map img{ width:100%; height:auto; display:block; } } /*==================================== Country Cards ====================================*/ @media (max-width:992px){ .inamcountry-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; } } @media (max-width:576px){ .inamcountry-grid{ grid-template-columns:1fr; } } /*==================================== Country Card ====================================*/ @media (max-width:768px){ .inamcountry-card{ padding:20px; } } @media (max-width:480px){ .inamcountry-card{ padding:18px; } } /*==================================== Flags ====================================*/ @media (max-width:576px){ .inamcountry-card img{ width:50px; height:50px; } } /*==================================== Statistics ====================================*/ @media (max-width:768px){ .inamorigin-stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; } } @media (max-width:480px){ .inamorigin-stats{ grid-template-columns:1fr; } } /*==================================== Buttons ====================================*/ @media (max-width:768px){ .inamorigin .btn, .inamorigin a.btn{ width:100%; max-width:320px; margin:auto; } } /*==================================== Images ====================================*/ @media (max-width:768px){ .inamorigin img{ max-width:100%; height:auto; } } /*==================================== Hover Disable ====================================*/ @media (hover:none){ .inamcountry-card:hover{ transform:none; } } /*==================================== Overflow Fix ====================================*/ @media (max-width:768px){ .inamorigin, .inamorigin-wrapper{ overflow:hidden; } } /*==================================== Accessibility ====================================*/ @media (prefers-reduced-motion:reduce){ .inamorigin *{ animation:none !important; transition:none !important; } } /*==================================================== HOME RESPONSIVE PART 8 : INAM STANDARD SECTION ====================================================*/ /*==================================== Large Desktop ====================================*/ @media (min-width:1600px){ .inamstandard-wrapper{ padding:120px 0; } .inamstandard-container{ max-width:1550px; gap:100px; } .inamstandard-maintitle{ font-size:62px; } .inamstandard-description{ font-size:20px; max-width:760px; } .inamstandard-circle{ width:430px; height:430px; } .inamstandard-seal{ width:290px; } } /*==================================== 1400px ====================================*/ @media (max-width:1400px){ .inamstandard-container{ gap:60px; } } /*==================================== 1200px ====================================*/ @media (max-width:1200px){ .inamstandard-container{ grid-template-columns:1fr; gap:60px; } .inamstandard-left{ text-align:center; } .inamstandard-description{ margin-inline:48px; } } /*==================================== 992px ====================================*/ @media (max-width:992px){ .inamstandard-wrapper{ padding:80px 0; } .inamstandard-maintitle{ font-size:42px; } .inamstandard-grid{ grid-template-columns:repeat(2,1fr); gap:20px; } /* .inamstandard-right{ min-height:420px; } */ } @media (max-width:576px){ .inamstandard-wrapper{ padding:60px 15px; } .inamstandard-maintitle{ font-size:30px; } .inamstandard-smalltitle{ font-size:12px; padding:8px 18px; } .inamstandard-grid{ gap:18px; } .inamstandard-card{ padding:24px 18px; border-radius:18px; height:auto !important; min-height:auto !important; } .inamstandard-card h3{ font-size:20px; } .inamstandard-card p{ font-size:14px; } .inamstandard-icon{ width:60px; height:60px; margin-bottom:14px; } } @media (max-width:480px){ .inamstandard-maintitle{ font-size:28px; } .inamstandard-grid{ gap:16px; } .inamstandard-card{ padding:22px 16px; } .inamstandard-card h3{ font-size:19px; } .inamstandard-card p{ font-size:13px; line-height:1.7; } .inamstandard-icon{ width:56px; height:56px; } .inamstandard-circle{ width:240px; height:240px; } .inamstandard-seal{ width:145px; } } /*==================================== 375px ====================================*/ @media (max-width:375px){ .inamstandard-wrapper{ padding:50px 12px; } .inamstandard-maintitle{ font-size:24px; } .inamstandard-card{ padding:20px 15px; } .inamstandard-card h3{ font-size:18px; } } /*==================================== 320px ====================================*/ @media (max-width:320px){ .inamstandard-wrapper{ padding:45px 10px; } .inamstandard-maintitle{ font-size:22px; } .inamstandard-card{ padding:18px 14px; /* width:231px; */ } } /*==================================== Floating Badges ====================================*/ @media (max-width:992px){ .inamstandard-badge{ transform:scale(.90); } } @media (max-width:768px){ .inamstandard-badge{ position:relative; inset:auto; display:block; width:fit-content; margin:12px auto; animation:none; } } /*==================================== Images ====================================*/ /* @media (max-width:768px){ .inamstandard img{ max-width:100%; height:auto; display:block; } } */ @media (max-width:768px){ .inamstandard-wrapper{ padding:70px 20px; } .inamstandard-container{ grid-template-columns:1fr; gap:30px; } .inamstandard-left{ width:100%; text-align:center; } .inamstandard-right{ display:none; } .inamstandard-maintitle{ font-size:36px; line-height:1.3; } .inamstandard-description{ font-size:16px; line-height:1.8; margin:20px auto; } .inamstandard-grid{ grid-template-columns:1fr; gap:18px; } .inamstandard-card{ /* width:100%; */ max-width:100%; display:flex; flex-direction:column; align-items:center; text-align:center; padding:24px 18px; margin:10px; } } /*==================================== Hover ====================================*/ @media (hover:none){ .inamstandard-card:hover{ transform:none; } } /*==================================== Overflow ====================================*/ @media (max-width:768px){ .inamstandard-wrapper, .inamstandard-container{ overflow:hidden; } } /*==================================== Accessibility ====================================*/ @media (prefers-reduced-motion:reduce){ .inamstandard *{ animation:none !important; transition:none !important; } } /*==================================================== HOME RESPONSIVE PART 9 : PRODUCT APPLICATIONS ====================================================*/ /*==================================== Large Desktop ====================================*/ @media (min-width:1600px){ .inamapps-wrapper{ padding:120px 0; } .inamapps-container{ max-width:1550px; } .inamapps-maintitle{ font-size:64px; } .inamapps-description{ max-width:850px; font-size:20px; } } /*==================================== 1400px ====================================*/ @media (max-width:1400px){ .inamapps-slider{ gap:22px; } .inamappscard-box{ width:290px; height:500px; } } /*==================================== 1200px ====================================*/ @media (max-width:1200px){ .inamapps-slider{ display:grid; grid-template-columns:repeat(2,1fr); justify-items:center; gap:28px; } .inamappscard-box{ width:100%; max-width:360px; } } /*==================================== 992px ====================================*/ @media (max-width:992px){ .inamapps-wrapper{ padding:80px 0; } .inamapps-maintitle{ font-size:42px; } .inamapps-description{ font-size:16px; } } /*==================================== 768px ====================================*/ @media (max-width:768px){ .inamapps-wrapper{ padding:70px 20px; } .inamapps-slider{ grid-template-columns:1fr; } .inamappscard-box{ max-width:420px; width:100%; height:480px; } .inamapps-maintitle{ font-size:36px; } .inamappscard-title{ font-size:30px; } } /*==================================== 576px ====================================*/ @media (max-width:576px){ .inamapps-wrapper{ padding:60px 15px; } .inamapps-heading{ margin-bottom:45px; } .inamapps-maintitle{ font-size:30px; } .inamapps-smalltitle{ font-size:12px; padding:8px 18px; } .inamappscard-content{ left:20px; right:20px; bottom:20px; } } /*==================================== 480px ====================================*/ @media (max-width:480px){ .inamappscard-box{ height:420px; border-radius:24px; } .inamappscard-title{ font-size:26px; } .inamappscard-text{ font-size:14px; } } /*==================================== 375px ====================================*/ @media (max-width:375px){ .inamapps-maintitle{ font-size:24px; } .inamappscard-box{ height:390px; } .inamappscard-title{ font-size:22px; } } /*==================================== 320px ====================================*/ @media (max-width:320px){ .inamapps-wrapper{ padding:50px 10px; } .inamapps-maintitle{ font-size:20px; } .inamappscard-content{ left:15px; right:15px; bottom:15px; } .inamappscard-title{ font-size:20px; } } /*==================================== Images ====================================*/ @media (max-width:768px){ .inamappscard-image{ width:100%; height:100%; object-fit:cover; } } /*==================================== Touch Devices ====================================*/ @media (hover:none){ .inamappscard-box:hover{ transform:none; } .inamappscard-box:hover .inamappscard-image{ transform:none; } } /*==================================== Overflow Protection ====================================*/ @media (max-width:768px){ .inamapps-wrapper, .inamapps-slider{ overflow:hidden; } } /*==================================== Accessibility ====================================*/ @media (prefers-reduced-motion:reduce){ .inamapps *{ animation:none !important; transition:none !important; } } /*==================================================== HOME RESPONSIVE PART 10 : TRENDING APPLICATIONS ====================================================*/ /*==================================== Large Desktop (1600px+) ====================================*/ @media (min-width:1600px){ .inamtrend-wrapper{ padding:140px 0; } .inamtrend-container{ max-width:1600px; } .inamtrend-maintitle{ font-size:64px; } .inamtrend-description{ max-width:850px; font-size:20px; } .inamtrend-card{ width:430px; height:260px; } .inamtrend-cardimage{ width:340px; } } /*==================================== 1400px ====================================*/ @media (max-width:1400px){ .inamtrend-grid{ gap:28px; } .inamtrend-card{ width:360px; } } /*==================================== 1200px ====================================*/ @media (max-width:1200px){ .inamtrend-grid{ display:grid; grid-template-columns:repeat(2,1fr); justify-items:center; gap:28px; overflow:visible; } .inamtrend-card{ width:100%; max-width:380px; } } /*==================================== 992px ====================================*/ @media (max-width:992px){ .inamtrend-wrapper{ padding:80px 0; } .inamtrend-maintitle{ font-size:42px; } .inamtrend-description{ font-size:16px; } .inamtrend-grid{ grid-template-columns:1fr; } } /*==================================== 768px ====================================*/ @media (max-width:768px){ .inamtrend-wrapper{ padding:70px 20px; } .inamtrend-heading{ margin-bottom:45px; } .inamtrend-maintitle{ font-size:36px; } .inamtrend-description{ font-size:15px; } .inamtrend-card{ width:82%; max-width:420px; height:auto; min-height:220px; padding:24px; margin:auto; } .inamtrend-cardcontent{ width:58%; } .inamtrend-cardtitle{ font-size:28px; } .inamtrend-cardimage{ width:170px; right:-10px; bottom:10px; } .inamtrend-decoration-left, .inamtrend-decoration-right{ display:none; } } /*==================================== 576px ====================================*/ @media (max-width:576px){ .inamtrend-wrapper{ padding:60px 15px; } .inamtrend-maintitle{ font-size:30px; } .inamtrend-smalltitle{ font-size:12px; padding:8px 18px; } .inamtrend-card{ border-radius:20px; } .inamtrend-cardcontent{ width:100%; } .inamtrend-cardimage{ position:relative; /* right:auto; */ right:57px; bottom:auto; display:block; width:170px; margin:20px auto 0; } } /*==================================== 480px ====================================*/ @media (max-width:480px){ .inamtrend-maintitle{ font-size:26px; } .inamtrend-card{ padding:20px; } .inamtrend-cardtitle{ font-size:22px; } .inamtrend-cardtext{ font-size:14px; } } /*==================================== 375px ====================================*/ @media (max-width:375px){ .inamtrend-maintitle{ font-size:24px; } .inamtrend-card{ padding:18px; } } /*==================================== 320px ====================================*/ @media (max-width:320px){ .inamtrend-wrapper{ padding:50px 10px; } .inamtrend-maintitle{ font-size:20px; } .inamtrend-card{ padding:15px; } .inamtrend-cardtitle{ font-size:20px; } } /*==================================== Touch Devices ====================================*/ @media (hover:none){ .inamtrend-card:hover{ transform:none; } .inamtrend-card:hover::before, .inamtrend-card:hover::after{ left:auto; } .inamtrend-card:hover .inamtrend-cardimage{ transform:none; } } /*==================================== Reduced Motion ====================================*/ @media (prefers-reduced-motion:reduce){ .inamtrend *, .inamtrend-card, .inamtrend-cardimage{ animation:none !important; transition:none !important; } } /*==================================== Overflow Protection ====================================*/ @media (max-width:768px){ .inamtrend-wrapper, .inamtrend-grid{ overflow:hidden; } } /*==================================================== HOME RESPONSIVE PART 11 : INAM 3D CATALOGUE ====================================================*/ /*==================================== Large Desktop ====================================*/ @media (min-width:1600px){ .inam3d-wrapper{ padding:160px 0; } .inam3d-container{ max-width:1650px; } .inam3d-title{ font-size:68px; } .inam3d-description{ max-width:850px; font-size:20px; } .inam3d-book{ width:860px; height:570px; } } /*==================================== 1400px ====================================*/ @media (max-width:1400px){ .inam3d-book{ width:680px; height:460px; } .catalog-book{ width:460px; height:640px; } } /*==================================== 1200px ====================================*/ @media (max-width:1200px){ .inam3d-wrapper{ padding:100px 0; } .inam3d-title{ font-size:48px; } .inam3d-stage{ min-height:600px; } .inam3d-book{ width:600px; height:400px; } .catalog-book{ width:420px; height:580px; } } /*==================================== 992px ====================================*/ @media (max-width:992px){ .inam3d-heading{ margin-bottom:60px; } .inam3d-title{ font-size:42px; } .inam3d-description{ font-size:16px; } .inam3d-stage{ min-height:520px; } .inam3d-book{ width:520px; height:350px; } .inam3d-logo{ width:90px; } .inam3d-covertitle{ font-size:42px; } .inam3d-coversubtitle{ font-size:16px; } } /*==================================== 768px ====================================*/ @media (max-width:768px){ .inam3d-wrapper{ padding:80px 20px; } .inam3d-title{ font-size:36px; } .inam3d-description{ font-size:15px; } .inam3d-stage{ min-height:430px; } .inam3d-book{ width:430px; height:290px; transform: rotateX(10deg) rotateY(-15deg); } .inam3d-shadow{ width:360px; } .inam3d-logo{ width:70px; } .inam3d-covertitle{ font-size:32px; margin:18px 0 12px; } .inam3d-openbutton{ margin-top:25px; padding:12px 24px; font-size:14px; } } /*==================================== 576px ====================================*/ @media (max-width:576px){ .inam3d-wrapper{ padding:70px 15px; } .inam3d-badge{ font-size:12px; padding:8px 18px; } .inam3d-title{ font-size:30px; } .inam3d-book{ width:340px; height:230px; } .inam3d-shadow{ width:260px; } .inam3d-logo{ width:60px; } .inam3d-covertitle{ font-size:24px; letter-spacing:1px; } .inam3d-coversubtitle{ font-size:14px; } .inam3d-openbutton{ padding:10px 20px; } } /*==================================== 480px ====================================*/ @media (max-width:480px){ .inam3d-title{ font-size:26px; } .inam3d-description{ font-size:14px; } .inam3d-book{ width:300px; height:200px; } .inam3d-cover::before{ inset:12px; } } /*==================================== 375px ====================================*/ @media (max-width:375px){ .inam3d-title{ font-size:22px; } .inam3d-book{ width:260px; height:175px; } .inam3d-stage{ min-height:340px; } } /*==================================== 320px ====================================*/ @media (max-width:320px){ .inam3d-wrapper{ padding:60px 10px; } .inam3d-title{ font-size:20px; } .inam3d-book{ width:220px; height:150px; } .inam3d-logo{ width:45px; } .inam3d-covertitle{ font-size:18px; } .inam3d-openbutton{ font-size:12px; padding:8px 16px; } } /*==================================== Hide Decorative Particles ====================================*/ @media (max-width:768px){ .inam3d-particle{ display:none; } } /*==================================== Touch Devices ====================================*/ @media (hover:none){ .inam3d-book:hover{ transform: rotateX(14deg) rotateY(-30deg); } .inam3d-openbutton:hover{ transform:none; } } /*==================================== Reduced Motion ====================================*/ @media (prefers-reduced-motion:reduce){ .inam3d *{ animation:none !important; transition:none !important; } } /*==================================== Overflow Protection ====================================*/ @media (max-width:768px){ .inam3d-wrapper, .inam3d-stage{ overflow:hidden; } } /*==================================================== HOME RESPONSIVE PART 12 : COMPANY VIDEO SECTION ====================================================*/ /*==================================== Large Desktop ====================================*/ @media (min-width:1600px){ .inamcmpvideo-container{ max-width:1550px; } .inamcmpvideo-heading{ font-size:72px; } .inamcmpvideo-description{ max-width:520px; font-size:20px; } } /*==================================== 1400px ====================================*/ @media (max-width:1400px){ .inamcmpvideo-left{ padding:60px 50px; } .inamcmpvideo-heading{ font-size:58px; } } /*==================================== 1200px ====================================*/ @media (max-width:1200px){ .inamcmpvideo-container{ grid-template-columns:1fr; } .inamcmpvideo-left{ padding:60px; } .inamcmpvideo-right{ min-height:500px; } .inamcmpvideo-box{ width:100%; height:450px; } .inamcmpvideo-image, .inamcmpvideo-player, .inamcmpvideo-overlay{ width:92%; right:4%; } } /*==================================== 992px ====================================*/ @media (max-width:992px){ .inamcmpvideo-wrapper{ padding:80px 0; width:100%; margin-left:0; } .inamcmpvideo-heading{ font-size:48px; } .inamcmpvideo-description{ font-size:16px; line-height:1.8; } .inamcmpvideo-button{ padding:16px 28px; font-size:16px; } } /*==================================== 768px ====================================*/ @media (max-width:768px){ .inamcmpvideo-left{ padding:40px 25px; } .inamcmpvideo-heading{ font-size:38px; } .inamcmpvideo-description{ font-size:15px; } .inamcmpvideo-box{ height:360px; } .inamcmpvideo-image, .inamcmpvideo-player, .inamcmpvideo-overlay{ width:100%; right:0; height:100%; clip-path:none; border-radius:20px; } .inamcmpvideo-play{ width:90px; height:90px; } .inamcmpvideo-play i{ font-size:30px; } } /*==================================== 576px ====================================*/ @media (max-width:576px){ .inamcmpvideo-wrapper{ padding:60px 15px; } .inamcmpvideo-heading{ font-size:30px; } .inamcmpvideo-tag{ font-size:12px; } .inamcmpvideo-button{ width:100%; justify-content:center; } .inamcmpvideo-box{ height:280px; } .inamcmpvideo-play{ width:72px; height:72px; } } /*==================================== 480px ====================================*/ @media (max-width:480px){ .inamcmpvideo-heading{ font-size:26px; } .inamcmpvideo-description{ font-size:14px; } .inamcmpvideo-button{ padding:14px 20px; font-size:15px; } } /*==================================== 375px ====================================*/ @media (max-width:375px){ .inamcmpvideo-heading{ font-size:22px; } .inamcmpvideo-play{ width:60px; height:60px; } .inamcmpvideo-play i{ font-size:22px; } } /*==================================== 320px ====================================*/ @media (max-width:320px){ .inamcmpvideo-wrapper{ padding:50px 10px; } .inamcmpvideo-heading{ font-size:20px; } .inamcmpvideo-left{ padding:30px 18px; } .inamcmpvideo-box{ height:220px; } } /*==================================== Touch Devices ====================================*/ @media (hover:none){ .inamcmpvideo-button:hover, .inamcmpvideo-play:hover{ transform:none; } } /*==================================== Reduced Motion ====================================*/ @media (prefers-reduced-motion:reduce){ .inamcmpvideo *{ animation:none !important; transition:none !important; } } /*==================================== Overflow Protection ====================================*/ @media (max-width:768px){ .inamcmpvideo-wrapper, .inamcmpvideo-container{ overflow:hidden; } } /*==================================================== HOME RESPONSIVE PART 13 PRODUCT CATEGORIES + WHY CHOOSE INAM ====================================================*/ /*==================================== 1400px ====================================*/ @media (max-width:1400px){ .inamcatcard-imagebox::before{ width:120px; height:120px; } } /*==================================== 1200px ====================================*/ @media (max-width:1200px){ .inamtrust-container{ gap:30px; } .inamtrust-wrapper::before{ width:480px; height:480px; } .inamtrust-wrapper::after{ width:380px; height:380px; } } /*==================================== 992px ====================================*/ @media (max-width:992px){ .inamcatcard-title::after{ width:40px; } .inamcatcard-imagebox::before{ width:100px; height:100px; } .inamtrust-card{ padding:28px; } .inamtrust-card-title{ font-size:24px; } } /*==================================== 768px ====================================*/ @media (max-width:768px){ /* Decorative background */ .inamtrust-wrapper::before, .inamtrust-wrapper::after{ display:none; } /* Heading animation */ .inamcatsec-smalltitle{ gap:8px; } .inamcatsec-smalltitle::before{ width:24px; } /* Category image glow */ .inamcatcard-imagebox::before{ width:85px; height:85px; } .inamcatcard-imagebox::after{ width:55%; } /* Trust Cards */ .inamtrust-card{ padding:24px; } .inamtrust-card-icon{ width:56px; height:56px; } } /*==================================== 576px ====================================*/ @media (max-width:576px){ .inamcatsec-smalltitle{ font-size:12px; } .inamcatcard-title{ font-size:22px; } .inamcatcard-description{ font-size:14px; } .inamtrust-card{ padding:20px; border-radius:18px; } .inamtrust-card-title{ font-size:22px; } .inamtrust-card-text{ font-size:14px; line-height:1.7; } } /*==================================== 480px ====================================*/ @media (max-width:480px){ .inamcatcard-imagebox::before{ width:70px; height:70px; } .inamcatcard-title{ font-size:20px; } .inamtrust-card{ padding:18px; } } /*==================================== 375px ====================================*/ @media (max-width:375px){ .inamcatcard-title{ font-size:18px; } .inamtrust-card-title{ font-size:20px; } } /*==================================== 320px ====================================*/ @media (max-width:320px){ .inamcatsec-smalltitle{ font-size:11px; } .inamcatcard-title{ font-size:17px; } .inamcatcard-description{ font-size:13px; } .inamtrust-card{ padding:15px; } } /*==================================== Touch Devices ====================================*/ @media (hover:none){ .inamcatcard-box:hover, .inamtrust-card:hover{ transform:none; } .inamcatcard-box:hover::before, .inamcatcard-box:hover::after{ opacity:0; } .inamcatcard-box:hover .inamcatcard-image, .inamtrust-card:hover .inamtrust-card-image img{ transform:none; } .inamcatcard-box:hover .inamcatcard-content, .inamtrust-card:hover .inamtrust-card-title{ transform:none; } } /*==================================== Reduced Motion ====================================*/ @media (prefers-reduced-motion:reduce){ .inamcatsec-wrapper *, .inamtrust-wrapper *{ animation:none !important; transition:none !important; } } /*==================================== Overflow Protection ====================================*/ @media (max-width:768px){ .inamcatsec-wrapper, .inamtrust-wrapper{ overflow:hidden; } } /*==================================================== HOME RESPONSIVE PART 14 WHY CHOOSE INAM INAM STANDARD VIDEO MODAL ====================================================*/ /*==================================== 1400px ====================================*/ @media (max-width:1400px){ .inamtrust-content::before{ width:260px; height:260px; } .inamstandard-circle::before{ inset:-18px; } } /*==================================== 1200px ====================================*/ @media (max-width:1200px){ .inamtrust-content::before{ display:none; } .inamstandard-badge{ font-size:14px; } } /*==================================== 992px ====================================*/ @media (max-width:992px){ .inamtrust-smalltitle::before{ width:32px; } .inamtrust-maintitle::after{ width:70px; } .inamstandard-circle{ transform:scale(.90); } } /*==================================== 768px ====================================*/ @media (max-width:768px){ .inamtrust-smalltitle{ gap:8px; } .inamtrust-smalltitle::before{ width:24px; } .inamtrust-maintitle::after{ width:55px; height:3px; } .inamtrust-list{ gap:12px; } .inamtrust-listitem{ font-size:15px; } .inamstandard-circle{ transform:scale(.75); } .inamstandard-badge{ font-size:13px; padding:8px 14px; } } /*==================================== 576px ====================================*/ @media (max-width:576px){ .inamtrust-maintitle::after{ width:45px; } .inamtrust-listitem{ font-size:14px; } .inamtrust-button{ width:66%; justify-content:center; } .inamstandard-circle{ transform:scale(.62); } .inamstandard-seal{ max-width:160px; } } /*==================================== 480px ====================================*/ @media (max-width:480px){ .inamtrust-smalltitle{ font-size:12px; } .inamtrust-listitem{ font-size:13px; } .inamstandard-circle{ transform:scale(.55); } } /*==================================== 375px ====================================*/ @media (max-width:375px){ .inamstandard-circle{ transform:scale(.48); } } /*==================================== 320px ====================================*/ @media (max-width:320px){ .inamtrust-smalltitle{ font-size:11px; } .inamtrust-maintitle::after{ width:35px; } .inamstandard-circle{ transform:scale(.42); } } /*==================================== VIDEO MODAL ====================================*/ @media (max-width:768px){ .inamcmpvideo-modal{ padding:20px; } .inamcmpvideo-modal-content{ width:100%; } .inamcmpvideo-modal video{ border-radius:14px; } .inamcmpvideo-close{ width:40px; height:40px; top:-10px; right:-10px; font-size:22px; } } @media (max-width:480px){ .inamcmpvideo-modal{ padding:12px; } .inamcmpvideo-close{ width:34px; height:34px; font-size:18px; } } /*==================================== Touch Devices ====================================*/ @media (hover:none){ .inamtrust-card:hover, .inamstandard-card:hover, .inamstandard-badge:hover{ transform:none; } } /*==================================== Reduced Motion ====================================*/ @media (prefers-reduced-motion:reduce){ .inamtrust-wrapper *, .inamstandard-wrapper *, .inamcmpvideo-modal *{ animation:none !important; transition:none !important; } } /*==================================== Overflow Protection ====================================*/ @media (max-width:768px){ .inamtrust-wrapper, .inamstandard-wrapper{ overflow:hidden; } } /*==================================================== PRODUCTS PAGE RESPONSIVE PART 1 HERO + FEATURED PRODUCT ====================================================*/ /*==================================== Touch Devices ====================================*/ @media (hover:none){ .inam-productshero-enquirybtn:hover, .inam-loader-card:hover{ transform:none; } } /*==================================== Reduced Motion ====================================*/ @media (prefers-reduced-motion:reduce){ .inam-products-page *, .inam-page-loader *{ animation:none !important; transition:none !important; } } /*==================================== Overflow Protection ====================================*/ @media (max-width:768px){ .inam-products-page, .inam-page-loader{ overflow:hidden; } } /*==================================================== PRODUCTS PAGE RESPONSIVE PART 4 ANIMATIONS + LOADER ====================================================*/ /*==================================== 1600px ====================================*/ @media (min-width:1600px){ .inam-loader-content{ max-width:1500px; } } /*==================================== 1400px ====================================*/ @media (max-width:1400px){ .inam-loader-products{ gap:20px; } } /*==================================== 1200px ====================================*/ @media (max-width:1200px){ .inam-loader-card{ width:160px; height:235px; } .inam-loader-card img{ width:120px; height:120px; } } /*==================================== 992px ====================================*/ @media (max-width:992px){ .inam-featureproduct-image{ transform:none; } .inam-featureproduct-content{ transform:none; } .inam-loader-content h2{ font-size:38px; } .inam-loader-products{ gap:18px; } .inam-loader-card{ width:145px; height:220px; } } /*==================================== 768px ====================================*/ @media (max-width:768px){ .inam-featureproduct-imagebox, .inam-featureproduct-content{ transition:none; } .inam-featureproduct-image{ filter:none; } .inam-loader-logo{ width:170px; } .inam-loader-content h2{ font-size:30px; } .inam-loader-subtitle{ font-size:14px; margin:28px auto; } .inam-loader-products{ justify-content:center; gap:16px; } .inam-loader-card{ width:135px; height:205px; } .inam-loader-card img{ width:100px; height:100px; } } /*==================================== 576px ====================================*/ @media (max-width:576px){ .inam-loader-logo{ width:145px; } .inam-loader-content h2{ font-size:24px; } .inam-loader-subtitle{ font-size:13px; } .inam-loader-card{ width:120px; height:185px; padding:15px; } .inam-loader-card img{ width:90px; height:90px; } .inam-loader-card span{ font-size:13px; } } /*==================================== 480px ====================================*/ @media (max-width:480px){ .inam-loader-content{ width:95%; } .inam-loader-card{ width:105px; height:170px; } .inam-loader-card img{ width:78px; height:78px; } .inam-loader-card span{ font-size:12px; } } /*==================================== 375px ====================================*/ @media (max-width:375px){ .inam-loader-card{ width:95px; height:160px; } .inam-loader-card img{ width:70px; height:70px; } } /*==================================== 320px ====================================*/ @media (max-width:320px){ .inam-loader-products{ gap:10px; } .inam-loader-card{ width:88px; height:145px; padding:10px; } .inam-loader-card img{ width:64px; height:64px; } } /*==================================== Touch Devices ====================================*/ @media (hover:none){ .inam-loader-card:hover{ transform:none; } } /*==================================== Reduced Motion ====================================*/ @media (prefers-reduced-motion:reduce){ .inam-featureproduct-image, .inam-featureproduct-content, .inam-loader-card, .inam-loader-logo{ animation:none !important; transition:none !important; transform:none !important; } } /*==================================== Overflow Protection ====================================*/ @media (max-width:768px){ .inam-page-loader{ overflow:hidden; } } /*==================================================== BLOG DETAILS RESPONSIVE PART 2 ====================================================*/ /*==================================== 1600px ====================================*/ @media (min-width:1600px){ .bd-container{ max-width:1500px; } } /*==================================== 1400px ====================================*/ @media (max-width:1400px){ .bd-floating-card{ max-width:1100px; } } /*==================================== 1200px ====================================*/ @media (max-width:1200px){ .bd-floating-card{ margin-top:-80px; padding:30px; } .bd-products-grid{ grid-template-columns:repeat(3,1fr); } } /*==================================== 992px ====================================*/ @media (max-width:992px){ .bd-meta{ gap:18px; } .bd-floating-card h1{ font-size:2.3rem; } .bd-content p{ font-size:18px; } .bd-content h2{ font-size:1.8rem; } .bd-features{ grid-template-columns:repeat(2,1fr); } .bd-products-grid{ grid-template-columns:repeat(2,1fr); } .bd-related-blog-layout{ grid-template-columns:1fr; gap:30px; } .bd-featured-blog{ min-height:500px; } } /*==================================== 768px ====================================*/ @media (max-width:768px){ .bd-floating-card{ margin-top:-60px; padding:24px; } .bd-floating-card h1{ font-size:2rem; } .bd-content p{ font-size:16px; line-height:1.8; } .bd-content h2{ font-size:1.6rem; } .bd-content h3{ font-size:1.35rem; } .bd-content blockquote{ padding:28px; } .bd-products-grid{ grid-template-columns:1fr; } .bd-product-image{ height:240px; } } /*==================================== 576px ====================================*/ @media (max-width:576px){ .bd-meta{ flex-direction:column; gap:10px; } .bd-floating-card{ padding:20px; } .bd-floating-card h1{ font-size:1.7rem; } .bd-content img{ margin:30px 0; } .bd-content blockquote{ padding:22px; font-size:1rem; } .bd-feature-icon{ width:60px; height:60px; } } /*==================================== 480px ====================================*/ @media (max-width:480px){ .bd-content p{ font-size:15px; } .bd-content li{ font-size:15px; } .bd-feature-card{ padding:20px; } .bd-featured-blog{ min-height:380px; } } /*==================================== 375px ====================================*/ @media (max-width:375px){ .bd-floating-card h1{ font-size:1.5rem; } .bd-content h2{ font-size:1.4rem; } } /*==================================== 320px ====================================*/ @media (max-width:320px){ .bd-floating-card{ padding:16px; } .bd-content p{ font-size:14px; } } /*==================================== Touch Devices ====================================*/ @media (hover:none){ .bd-feature-card:hover, .bd-product-card:hover, .bd-featured-blog:hover{ transform:none; } } /*==================================== Reduced Motion ====================================*/ @media (prefers-reduced-motion:reduce){ .bd-page *{ animation:none !important; transition:none !important; } } /*==================================== Overflow Protection ====================================*/ @media (max-width:768px){ .bd-page{ overflow:hidden; } } /*==================================================== TERMS & CONDITIONS RESPONSIVE ====================================================*/ /*==================================== Large Desktop (1600px+) ====================================*/ @media (min-width:1600px){ .terms-container{ max-width:1450px; } .terms-hero{ height:420px; } .terms-hero-content h1{ font-size:72px; } .terms-hero-content p{ font-size:22px; } } /*==================================== 1400px ====================================*/ @media (max-width:1400px){ .terms-container{ max-width:1150px; } } /*==================================== 1200px ====================================*/ @media (max-width:1200px){ .terms-container{ width:92%; padding:45px; } .terms-hero-content h1{ font-size:52px; } } /*==================================== 992px ====================================*/ @media (max-width:992px){ .terms-hero{ height:300px; } .terms-hero-content h1{ font-size:44px; } .terms-hero-content p{ font-size:16px; line-height:1.8; } .terms-container{ width:94%; padding:35px; } .terms-container h2{ font-size:30px; } .terms-container h3{ font-size:24px; } } /*==================================== 768px ====================================*/ @media (max-width:768px){ .terms-hero{ height:260px; } .terms-hero-content h1{ font-size:36px; line-height:1.3; } .terms-hero-content p{ font-size:15px; line-height:1.7; padding:0 10px; } .terms-container{ width:95%; padding:28px; } .terms-container h2{ font-size:28px; } .terms-container h3{ font-size:22px; } .terms-container p, .terms-container li{ font-size:15px; line-height:1.8; } } /*==================================== 576px ====================================*/ @media (max-width:576px){ .terms-hero{ height:220px; } .terms-hero-content h1{ font-size:30px; } .terms-hero-content p{ display:none; } .terms-breadcrumb{ font-size:13px; } .terms-container{ width:95%; padding:22px; } .terms-container h2{ font-size:24px; } .terms-container h3{ font-size:20px; } .terms-container p, .terms-container li{ font-size:14px; line-height:1.8; } } /*==================================== 480px ====================================*/ @media (max-width:480px){ .terms-hero{ height:200px; } .terms-hero-content h1{ font-size:28px; } .terms-container{ padding:20px; border-radius:14px; } } /*==================================== 375px ====================================*/ @media (max-width:375px){ .terms-hero{ height:180px; } .terms-hero-content h1{ font-size:24px; } .terms-container{ width:96%; padding:18px; } .terms-container h2{ font-size:22px; } .terms-container h3{ font-size:18px; } .terms-container p, .terms-container li{ font-size:14px; } } /*==================================== 320px ====================================*/ @media (max-width:320px){ .terms-hero-content h1{ font-size:22px; } .terms-container{ width:98%; padding:15px; } .terms-container h2{ font-size:20px; } .terms-container h3{ font-size:17px; } .terms-container p, .terms-container li{ font-size:13px; line-height:1.7; } } /*==================================== Reduced Motion ====================================*/ @media (prefers-reduced-motion:reduce){ .terms-page *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; } } /*==================================================== PRIVACY POLICY RESPONSIVE ====================================================*/ @media (max-width:1200px){ .privacy-container{ width:92%; } } @media (max-width:992px){ .privacy-hero-content h1{ font-size:42px; } .privacy-container{ padding:40px; } } @media (max-width:768px){ .privacy-hero{ height:230px; } .privacy-hero-content h1{ font-size:34px; } .privacy-hero-content p{ font-size:15px; line-height:26px; } .privacy-container{ padding:30px; } } @media (max-width:576px){ .privacy-hero{ height:190px; } .privacy-hero-content h1{ font-size:28px; } .privacy-hero-content p{ display:none; } .privacy-breadcrumb{ font-size:14px; flex-wrap:wrap; } .privacy-container{ width:95%; padding:20px; } } @media (max-width:320px){ .privacy-container h2{ font-size:22px; } .privacy-container p{ font-size:14px; } } @media (prefers-reduced-motion:reduce){ .privacy-page *{ animation:none !important; transition:none !important; } } /*==================================================== ABOUT PAGE RESPONSIVE HERO + WHO WE ARE + WHY CHOOSE ====================================================*/ /*==========1400==========*/ @media (max-width:1400px){ .who-card, .why-card-main{ max-width:1100px; } } /*==========1200==========*/ @media (max-width:1200px){ .hero h1{ font-size:54px; } .who-card, .why-card-main{ padding:45px; } } /*==========992==========*/ @media (max-width:992px){ .hero{ height:55vh; } .hero h1{ font-size:48px; } .quote{ font-size:19px; } .description{ font-size:15px; } .features-grid{ grid-template-columns:1fr; } .why-features{ grid-template-columns:repeat(2,1fr); } } /*==========768==========*/ @media (max-width:768px){ .hero{ height:auto; padding:100px 6% 70px; } .hero-content{ max-width:100%; } .hero h1{ font-size:38px; } .hero-buttons{ flex-direction:column; } .btn-primary, .btn-secondary{ width:100%; text-align:center; } .who-card, .why-card-main{ padding:30px; } .who-header h2, .why-header h2{ font-size:34px; } .why-features{ grid-template-columns:1fr; } } /*==========576==========*/ @media (max-width:576px){ .hero h1{ font-size:30px; } .quote{ font-size:17px; } .description{ font-size:14px; } .who-card, .why-card-main{ padding:22px; border-radius:20px; margin:10px; } .who-header h2, .why-header h2{ font-size:28px; } } /*==========480==========*/ @media (max-width:480px){ .hero-buttons{ gap:12px; } .feature-btn{ padding:16px; font-size:15px; } } /*==========375==========*/ @media (max-width:375px){ .hero h1{ font-size:26px; } } /*==========320==========*/ @media (max-width:320px){ .hero{ padding:90px 5% 60px; } .hero h1{ font-size:24px; } } /*==========Touch==========*/ @media (hover:none){ .feature-btn:hover, .why-feature:hover{ transform:none; } } /*==========Reduced Motion==========*/ @media (prefers-reduced-motion:reduce){ .inam-about-page *{ animation:none !important; transition:none !important; } } /*==================================================== ABOUT PAGE RESPONSIVE VISION / BUSINESS ECOSYSTEM ====================================================*/ @media (max-width:1400px){ .orbit-container{ width:620px; height:620px; } } @media (max-width:1200px){ .orbit-container{ transform:scale(.85); } } @media (max-width:992px){ .vision-heading h2{ font-size:36px; } .orbit-container{ transform:scale(.72); transform-origin:center; } } @media (max-width:768px){ .vision-section{ padding:40px 5%; } .vision-heading h2{ font-size:30px; } .orbit-container{ width:100%; height:auto; transform:none; } .orbit-container::before, .orbit-container::after, .orbit-light{ display:none; } .inam-center{ position:relative; top:74px; left:74px; transform:none; margin:0 auto 30px; } .orbit-card{ position:relative; inset:auto !important; width:88%; height:auto; margin-bottom:20px; border-radius:22px; transform:none !important; } } @media (max-width:576px){ .inam-center{ width:180px; height:180px; } .inam-center h2{ font-size:32px; } } @media (hover:none){ .orbit-card:hover{ transform:none !important; } } @media (prefers-reduced-motion:reduce){ .vision-section *{ animation:none !important; transition:none !important; } } /*==================================================== ABOUT PAGE RESPONSIVE PART 3 GLOBAL PRESENCE + WORLD MAP ====================================================*/ /*============================ 1400px ============================*/ @media (max-width:1400px){ .about-global-presence, .global-presence{ margin:40px 6%; } } /*============================ 1200px ============================*/ @media (max-width:1200px){ .floating-card, .about-floating-card{ width:170px; padding:20px; } .floating-card strong, .about-floating-card strong{ font-size:34px; } } /*============================ 992px ============================*/ @media (max-width:992px){ .about-global-presence, .global-presence{ height:500px; } .map-content{ grid-template-columns:1fr; gap:40px; } #worldMap{ height:420px; } } /*============================ 768px ============================*/ @media (max-width:768px){ .about-global-presence, .global-presence{ height:auto; padding:40px 20px; display:flex; justify-content:center; align-items:center; } .floating-card, .about-floating-card{ position:relative; inset:auto; width:100%; max-width:320px; margin:0 auto 20px; } .map-left{ text-align:center; } .map-left h2{ font-size:32px; } .map-stats{ justify-content:center; flex-wrap:wrap; gap:20px; } #worldMap{ height:350px; } } /*============================ 576px ============================*/ @media (max-width:576px){ .floating-card, .about-floating-card{ padding:20px; } .floating-card strong, .about-floating-card strong{ font-size:30px; } .stat-box{ width:100%; } } /*============================ 480px ============================*/ @media (max-width:480px){ #worldMap{ height:280px; } .map-left h2{ font-size:26px; } } /*============================ 375px ============================*/ @media (max-width:375px){ .floating-card, .about-floating-card{ padding:18px; } } /*============================ 320px ============================*/ @media (max-width:320px){ #worldMap{ height:240px; } .floating-card strong, .about-floating-card strong{ font-size:26px; } } /*============================ Touch Devices ============================*/ @media (hover:none){ .floating-card:hover, .about-floating-card:hover{ transform:none; } } /*============================ Reduced Motion ============================*/ @media (prefers-reduced-motion:reduce){ .floating-card, .about-floating-card, .route-dot, .light-ray, .floating-particles span{ animation:none !important; transition:none !important; } } /*==================================================== ABOUT PAGE RESPONSIVE PART 4 CERTIFICATIONS + WHO WE ARE V2 ====================================================*/ /*==================================== 1600px ====================================*/ @media (min-width:1600px){ .certificate-book{ max-width:950px; } } /*==================================== 1400px ====================================*/ @media (max-width:1400px){ .who-wrapper{ gap:70px; } .certificate-paper{ padding:50px; } } /*==================================== 1200px ====================================*/ @media (max-width:1200px){ .who-wrapper{ gap:50px; } .who-content h1{ font-size:48px; } .certificate-book{ max-width:760px; height:420px; } .certificate-paper h3{ font-size:1.8rem; } } /*==================================== 992px ====================================*/ @media (max-width:992px){ .who-wrapper{ grid-template-columns:1fr; gap:60px; } .who-content{ max-width:100%; text-align:center; margin:auto; } .who-content p{ max-width:100%; } .who-btn{ margin-top:35px; } .who-image{ max-width:700px; margin:auto; } .who-card{ left:20px; bottom:20px; } .certificate-book{ max-width:700px; height:400px; } .certificate-paper{ padding:40px; } } /*==================================== 768px ====================================*/ @media (max-width:768px){ .certifications{ padding:80px 20px; } .certifications::before{ font-size:6rem; letter-spacing:8px; } .certificate-book{ height:auto; min-height:430px; } .certificate-paper{ padding:35px 25px; } .certificate-paper img{ max-width:180px; max-height:100px; } .certificate-paper h3{ font-size:1.5rem; } .certificate-paper p{ font-size:15px; } .cert-controls{ gap:18px; margin-top:40px; } .who-content h1{ font-size:38px; } .who-content p{ font-size:16px; line-height:1.8; } .who-image img{ height:380px; } .who-card{ position:relative; left:auto; bottom:auto; margin:25px auto 0; } .brand-container h2{ font-size:28px; } } /*==================================== 576px ====================================*/ @media (max-width:576px){ .certificate-paper{ padding:28px 20px; } .certificate-label{ font-size:.75rem; padding:7px 15px; } .certificate-paper h3{ font-size:1.3rem; } .certificate-paper p{ font-size:14px; } .cert-prev, .cert-next{ width:44px; height:44px; } .who-content h1{ font-size:32px; } .who-content p{ font-size:15px; } .who-btn{ width:74%; justify-content:center; padding:16px 26px; } .who-image img{ height:300px; border-radius:24px; } .who-card{ width:91%; max-width:260px; padding:22px; } .brand-container h2{ font-size:24px; line-height:1.5; } } /*==================================== 480px ====================================*/ @media (max-width:480px){ .certifications::before{ font-size:4rem; } .certificate-book{ min-height:400px; } .certificate-paper::before{ font-size:2.8rem; } .who-content h1{ font-size:28px; } } /*==================================== 375px ====================================*/ @media (max-width:375px){ .certificate-paper{ padding:22px 16px; } .certificate-paper h3{ font-size:1.15rem; } .brand-container h2{ font-size:21px; } } /*==================================== 320px ====================================*/ @media (max-width:320px){ .certificate-paper{ padding:18px 14px; } .certificate-paper img{ max-width:150px; } .who-content h1{ font-size:24px; } .who-card h2{ font-size:38px; } } /*==================================== Touch Devices ====================================*/ @media (hover:none){ .who-btn:hover, .cert-prev:hover, .cert-next:hover{ transform:none; } } /*==================================== Reduced Motion ====================================*/ @media (prefers-reduced-motion:reduce){ .certificate-slide, .certificate-paper, .who-card, .who-image, .who-btn{ animation:none !important; transition:none !important; transform:none !important; } } /*==================================== Overflow Protection ====================================*/ @media (max-width:768px){ .certifications, .who-we-are, .brand-message{ overflow:hidden; } } /*==================================================== GALLERY PAGE RESPONSIVE PART 1 ====================================================*/ /*==================================== 1600px ====================================*/ @media (min-width:1600px){ .gallery-section{ max-width:1700px; } .gallery-hero h1{ font-size:5rem; } .gallery-section-hero{ min-height:650px; } .gallery-grid{ min-height:650px; } } /*==================================== 1400px ====================================*/ @media (max-width:1400px){ .gallery-layout{ grid-template-columns:1fr 1.6fr; } } /*==================================== 1200px ====================================*/ @media (max-width:1200px){ .gallery-section{ width:94%; } .gallery-hero{ padding:50px 6% 60px; } .gallery-grid{ gap:16px; } } /*==================================== 992px ====================================*/ @media (max-width:992px){ .gallery-layout{ grid-template-columns:1fr; } .gallery-section-hero{ min-height:450px; } .gallery-grid{ grid-template-columns:repeat(3,1fr); min-height:420px; } } /*==================================== 768px ====================================*/ @media (max-width:768px){ .gallery-container{ margin-top:40px; } .gallery-hero{ padding:45px 25px 55px; text-align:center; } .gallery-hero h1{ font-size:2.6rem; } .gallery-hero p{ margin:auto; } .gallery-section{ width:95%; margin-bottom:70px; } .gallery-layout{ gap:16px; } .gallery-section-hero{ min-height:400px; } .gallery-hero-overlay{ left:24px; right:24px; bottom:24px; } .gallery-hero-overlay h2{ font-size:2rem; } .gallery-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:220px; gap:14px; } } /*==================================== 576px ====================================*/ @media (max-width:576px){ .gallery-hero{ padding:40px 20px 45px; } .gallery-hero h1{ font-size:2.2rem; } .gallery-hero-overlay{ left:18px; right:18px; bottom:18px; } .gallery-hero-overlay h2{ font-size:1.7rem; } .gallery-hero-overlay p{ font-size:14px; } .gallery-lightbox{ padding:15px; } .gallery-lightbox-close{ top:-40px; font-size:34px; } } /*==================================== 480px ====================================*/ @media (max-width:480px){ .gallery-grid{ grid-template-columns:1fr; grid-auto-rows:240px; } .gallery-item>span{ font-size:13px; } } /*==================================== 375px ====================================*/ @media (max-width:375px){ .gallery-hero h1{ font-size:2rem; } .gallery-hero-overlay h2{ font-size:1.5rem; } } /*==================================== 320px ====================================*/ @media (max-width:320px){ .gallery-hero{ padding:35px 15px 40px; } .gallery-hero h1{ font-size:1.8rem; } .gallery-hero p{ font-size:.9rem; } .gallery-item>span{ font-size:12px; } } /*==================================== Touch Devices ====================================*/ @media (hover:none){ .gallery-section-hero:hover img, .gallery-item:hover img{ transform:none; } .gallery-item:hover::before{ opacity:0; } } /*==================================== Reduced Motion ====================================*/ @media (prefers-reduced-motion:reduce){ .gallery-page *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; } } /*==================================== Overflow Protection ====================================*/ @media (max-width:768px){ .gallery-page, .gallery-section, .gallery-layout{ overflow:hidden; } } /*==================================================== AUTH RESPONSIVE PART 1 LOGIN PAGE ====================================================*/ /*==================================== 1600px ====================================*/ @media (min-width:1600px){ .inam-login-card{ width:520px; } } /*==================================== 1400px ====================================*/ @media (max-width:1400px){ .inam-login-page{ padding:70px 30px; } } /*==================================== 1200px ====================================*/ @media (max-width:1200px){ .inam-login-card{ width:460px; } } /*==================================== 992px ====================================*/ @media (max-width:992px){ .inam-login-page{ background-attachment:scroll; padding:70px 25px; } .inam-login-card{ width:440px; padding:38px; } } /*==================================== 768px ====================================*/ @media (max-width:768px){ .inam-login-page{ min-height:auto; padding:60px 20px; } .inam-login-card{ width:100%; max-width:460px; padding:35px 25px; border-radius:18px; } .inam-login-header h1{ font-size:30px; } .inam-login-header p{ font-size:14px; } } /*==================================== 576px ====================================*/ @media (max-width:576px){ .inam-login-card{ padding:30px 22px; } .inam-login-header h1{ font-size:28px; } .inam-login-input-group input{ padding:14px; } .inam-login-btn{ padding:14px; } } /*==================================== 480px ====================================*/ @media (max-width:480px){ .inam-login-page{ padding:40px 15px; } .inam-login-card{ padding:28px 18px; } .inam-login-header h1{ font-size:26px; } .inam-login-options{ flex-direction:column; align-items:flex-start; gap:12px; } } /*==================================== 375px ====================================*/ @media (max-width:375px){ .inam-login-header h1{ font-size:24px; } .inam-login-btn{ font-size:15px; } } /*==================================== 320px ====================================*/ @media (max-width:320px){ .inam-login-page{ padding:30px 10px; } .inam-login-card{ padding:22px 15px; } .inam-login-header h1{ font-size:22px; } .inam-login-input-group label{ font-size:14px; } .inam-login-input-group input{ font-size:14px; padding:12px; } } /*==================================== Touch Devices ====================================*/ @media (hover:none){ .inam-login-btn:hover{ transform:none; } } /*==================================== Reduced Motion ====================================*/ @media (prefers-reduced-motion:reduce){ .inam-login-page *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; } } /*==================================== Overflow Protection ====================================*/ @media (max-width:768px){ .inam-login-page{ overflow-x:hidden; } } /*==================================================== AUTH RESPONSIVE PART 2 SIGNUP PAGE ====================================================*/ /*======================== 1600px ========================*/ @media (min-width:1600px){ .inam-signup-card{ width:1200px; } } /*======================== 1400px ========================*/ @media (max-width:1400px){ .inam-signup-left-side, .inam-signup-right-side{ padding:40px; } } /*======================== 1200px ========================*/ @media (max-width:1200px){ .inam-signup-card{ width:1000px; } } /*======================== 992px ========================*/ @media (max-width:992px){ .inam-signup-page{ padding:60px 20px; } .inam-signup-card{ flex-direction:column; } .inam-signup-left-side, .inam-signup-right-side{ width:100%; } .inam-signup-right-side{ padding:35px; } .inam-signup-right-side img{ width:65%; max-width:280px; } } /*======================== 768px ========================*/ @media (max-width:768px){ .inam-signup-page{ padding:30px 20px; } .inam-signup-left-side{ padding:35px 25px; } .inam-signup-left-side h2{ font-size:28px; } .inam-signup-subtitle{ font-size:14px; } .inam-signup-right-side{ display:none; } } /*======================== 576px ========================*/ @media (max-width:576px){ .inam-signup-left-side{ padding:30px 22px; } .inam-signup-input-box input, .inam-signup-password-box input{ padding:14px 45px; } .inam-signup-btn{ padding:14px; } } /*======================== 480px ========================*/ @media (max-width:480px){ .inam-signup-left-side{ padding:28px 18px; } .inam-signup-left-side h2{ font-size:26px; } .inam-signup-remember label{ font-size:13px; } } /*======================== 375px ========================*/ @media (max-width:375px){ .inam-signup-left-side h2{ font-size:24px; } } /*======================== 320px ========================*/ @media (max-width:320px){ .inam-signup-left-side{ padding:22px 15px; } .inam-signup-left-side h2{ font-size:22px; } .inam-signup-input-box input, .inam-signup-password-box input{ font-size:14px; padding:12px 42px; } } /*======================== Touch ========================*/ @media (hover:none){ .inam-signup-btn:hover{ transform:none; } } /*======================== Reduced Motion ========================*/ @media (prefers-reduced-motion:reduce){ .inam-signup-page *{ animation:none !important; transition:none !important; } } /*==================================================== AUTH RESPONSIVE PART 3 FORGOT PASSWORD ====================================================*/ /*======================== 1400px ========================*/ @media (max-width:1400px){ .inam-forgot-card{ width:900px; } } /*======================== 1200px ========================*/ @media (max-width:1200px){ .inam-forgot-card{ width:850px; } } /*======================== 992px ========================*/ @media (max-width:992px){ .inam-forgot-page{ padding:60px 20px; } .inam-forgot-card{ flex-direction:column; } .inam-forgot-left-side, .inam-forgot-right-side{ width:100%; } } /*======================== 768px ========================*/ @media (max-width:768px){ .inam-forgot-left-side{ padding:40px 25px; } .inam-forgot-left-side h2{ font-size:30px; } .inam-forgot-right-side img{ width:65%; } } /*======================== 576px ========================*/ @media (max-width:576px){ .inam-forgot-page{ padding:35px 15px; } .inam-forgot-right-side{ display:none; } .inam-forgot-left-side{ padding:30px 20px; } .inam-forgot-left-side h2{ font-size:26px; } .inam-forgot-left-side p{ font-size:14px; } } /*======================== 480px ========================*/ @media (max-width:480px){ .inam-forgot-input-box input{ padding:14px 42px; } .inam-forgot-reset-btn{ padding:14px; } } /*======================== 375px ========================*/ @media (max-width:375px){ .inam-forgot-left-side h2{ font-size:24px; } } /*======================== 320px ========================*/ @media (max-width:320px){ .inam-forgot-left-side{ padding:22px 15px; } .inam-forgot-left-side h2{ font-size:22px; } .inam-forgot-input-box input{ font-size:14px; padding:12px 40px; } } /*======================== Touch ========================*/ @media (hover:none){ .inam-forgot-reset-btn:hover{ transform:none; } } /*======================== Reduced Motion ========================*/ @media (prefers-reduced-motion:reduce){ .inam-forgot-wrapper *{ animation:none !important; transition:none !important; } } /*======================== Overflow Protection ========================*/ @media (max-width:768px){ .inam-forgot-wrapper, .inam-signup-page{ overflow-x:hidden; } } /*==================================================== AUTH RESPONSIVE PART 4 RESET PASSWORD ====================================================*/ /*======================== 1600px ========================*/ @media (min-width:1600px){ .inam-reset-card{ width:560px; } } /*======================== 1400px ========================*/ @media (max-width:1400px){ .inam-reset-page{ padding:70px 25px; } } /*======================== 1200px ========================*/ @media (max-width:1200px){ .inam-reset-card{ width:480px; } } /*======================== 992px ========================*/ @media (max-width:992px){ .inam-reset-page{ padding:60px 20px; } .inam-reset-card{ width:100%; max-width:520px; padding:40px 30px; } } /*======================== 768px ========================*/ @media (max-width:768px){ .inam-reset-page{ padding:50px 20px; } .inam-reset-card{ padding:35px 25px; } .inam-reset-card h2{ font-size:30px; } } /*======================== 576px ========================*/ @media (max-width:576px){ .inam-reset-card{ padding:30px 20px; } .inam-reset-card h2{ font-size:28px; } .inam-reset-card p{ font-size:14px; } } /*======================== 480px ========================*/ @media (max-width:480px){ .inam-reset-page{ padding:40px 15px; } .inam-reset-password-box input{ padding:14px 42px; } .inam-reset-btn{ padding:14px; } } /*======================== 375px ========================*/ @media (max-width:375px){ .inam-reset-card h2{ font-size:24px; } } /*======================== 320px ========================*/ @media (max-width:320px){ .inam-reset-card{ padding:22px 15px; } .inam-reset-card h2{ font-size:22px; } .inam-reset-password-box input{ font-size:14px; padding:12px 40px; } } /*======================== Touch Devices ========================*/ @media (hover:none){ .inam-reset-btn:hover{ transform:none; } } /*======================== Reduced Motion ========================*/ @media (prefers-reduced-motion:reduce){ .inam-reset-wrapper *{ animation:none !important; transition:none !important; } } /*==================================================== PRODUCT DETAILS RESPONSIVE PART 1 PREMIUM HERO ====================================================*/ /*======================== 1600px ========================*/ @media (min-width:1600px){ .inamproducthero-container{ width:min(1500px,92%); } .inamproducthero-title{ font-size:64px; } } /*======================== 1400px ========================*/ @media (max-width:1400px){ .inamproducthero-title{ font-size:48px; } } /*======================== 1200px ========================*/ @media (max-width:1200px){ .inamproducthero-container{ gap:30px; } .inamproducthero-title{ font-size:44px; } } /*======================== 992px ========================*/ @media (max-width:992px){ .inamproducthero-container{ flex-direction:column; text-align:center; height:auto; padding:70px 0; } .inamproducthero-content, .inamproducthero-image{ width:100%; } .inamproducthero-content{ margin-top:0; } .inamproducthero-breadcrumb, .inamproducthero-features{ justify-content:center; } .inamproducthero-description{ margin-inline:auto; } } /*======================== 768px ========================*/ @media (max-width:768px){ .inamproducthero-container{ gap:40px; padding:60px 0; } .inamproducthero-title{ font-size:40px; } .inamproducthero-description{ font-size:15px; } .inamproducthero-image img{ max-width:420px; } } /*======================== 576px ========================*/ @media (max-width:576px){ .inamproducthero-title{ font-size:34px; } .inamproducthero-description{ font-size:14px; line-height:1.8; } .inamproducthero-features{ gap:18px; } .inamproducthero-image img{ max-width:320px; } } /*======================== 480px ========================*/ @media (max-width:480px){ .inamproducthero-badge{ font-size:11px; padding:8px 15px; } .inamproducthero-title{ font-size:30px; } .inamproducthero-feature{ width:100%; justify-content:center; } } /*======================== 375px ========================*/ @media (max-width:375px){ .inamproducthero-title{ font-size:27px; } .inamproducthero-description{ font-size:13px; } } /*======================== 320px ========================*/ @media (max-width:320px){ .inamproducthero-title{ font-size:24px; } .inamproducthero-breadcrumb{ gap:6px; } .inamproducthero-image img{ max-width:260px; } } /*======================== Touch Devices ========================*/ @media (hover:none){ .inamproducthero-image:hover img, .inamproducthero-feature:hover i{ transform:none; } } /*======================== Reduced Motion ========================*/ @media (prefers-reduced-motion:reduce){ .inamproducthero-wrapper *{ animation:none !important; transition:none !important; } } /*======================== Overflow Protection ========================*/ @media (max-width:768px){ .inamproducthero-wrapper{ overflow:hidden; } } /*==================================================== PRODUCT DETAILS RESPONSIVE PART 2 PRODUCT DETAILS SECTION ====================================================*/ /*==================================== 1600px ====================================*/ @media (min-width:1600px){ .inamproductdetails-container{ width:min(1500px,92%); } } /*==================================== 1400px ====================================*/ @media (max-width:1400px){ .inamproductdetails-container{ grid-template-columns:500px 1fr; gap:45px; } } /*==================================== 1200px ====================================*/ @media (max-width:1200px){ .inamproductdetails-container{ grid-template-columns:450px 1fr; gap:35px; } .inamproductdetails-title{ font-size:38px; } .inamproductdetails-mainimage{ height:420px; } } /*==================================== 992px ====================================*/ @media (max-width:992px){ .inamproductdetails-container{ grid-template-columns:1fr; gap:45px; } .inamproductdetails-gallery{ max-width:700px; margin:auto; } .inamproductdetails-content{ text-align:center; padding-top:0; } .inamproductdetails-description{ max-width:100%; } .inamproductdetails-breadcrumb{ justify-content:center; } .inamproductdetails-buttonarea{ justify-content:center; flex-wrap:wrap; } } /*==================================== 768px ====================================*/ @media (max-width:768px){ .inamproductdetails-wrapper{ padding:50px 0; } .inamproductdetails-mainimage{ height:360px; } .inamproductdetails-title{ font-size:34px; } .inamproductdetails-featuregrid{ grid-template-columns:1fr; } .inamproductdetails-thumbwrapper{ gap:10px; } .inamproductdetails-thumb{ width:75px; height:75px; } } /*==================================== 576px ====================================*/ @media (max-width:576px){ .inamproductdetails-title{ font-size:30px; } .inamproductdetails-description{ font-size:14px; line-height:1.8; } .inamproductdetails-mainimage{ height:300px; } .inamproductdetails-buttonarea{ flex-direction:column; align-items:stretch; } .inamproductdetails-primarybtn, .inamproductdetails-secondarybtn{ justify-content:center; width:78%; } } /*==================================== 480px ====================================*/ @media (max-width:480px){ .inamproductdetails-mainimage{ height:260px; border-radius:18px; } .inamproductdetails-thumb{ width:65px; height:65px; } .inamproductdetails-featurecard{ padding:15px; } .inamproductdetails-featureicon{ width:36px; height:36px; font-size:17px; } } /*==================================== 375px ====================================*/ @media (max-width:375px){ .inamproductdetails-title{ font-size:26px; } .inamproductdetails-featurecontent h4{ font-size:17px; } .inamproductdetails-featurecontent p{ font-size:12px; } } /*==================================== 320px ====================================*/ @media (max-width:320px){ .inamproductdetails-title{ font-size:23px; } .inamproductdetails-mainimage{ height:220px; } .inamproductdetails-thumb{ width:55px; height:55px; } .inamproductdetails-primarybtn, .inamproductdetails-secondarybtn{ padding:13px 18px; font-size:13px; } } /*==================================== Touch Devices ====================================*/ @media (hover:none){ .inamproductdetails-mainimage:hover img, .inamproductdetails-thumb:hover, .inamproductdetails-featurecard:hover, .inamproductdetails-primarybtn:hover{ transform:none; } } /*==================================== Reduced Motion ====================================*/ @media (prefers-reduced-motion:reduce){ .inamproductdetails-wrapper *{ animation:none !important; transition:none !important; } } /*==================================== Overflow Protection ====================================*/ @media (max-width:768px){ .inamproductdetails-wrapper{ overflow:hidden; } } /*==================================================== PRODUCT DETAILS RESPONSIVE PART 3 ANIMATIONS & EFFECTS ====================================================*/ /*==================================== 992px ====================================*/ @media (max-width:992px){ .inamproductdetails-gallery, .inamproductdetails-content{ animation-duration:.7s; } } /*==================================== 768px ====================================*/ @media (max-width:768px){ .inamproductdetails-mainimage img{ animation: inamImageZoom .8s ease, inamFloating 5s ease-in-out infinite; } .inamproductdetails-featurecard{ animation-duration:.6s; } } /*==================================== 576px ====================================*/ @media (max-width:576px){ .inamproductdetails-thumb.active{ transform:none; } .inamproductdetails-thumb.active::after{ width:6px; height:6px; bottom:-8px; } } /*==================================== 480px ====================================*/ @media (max-width:480px){ .inamproductdetails-featurecard::before{ width:4px; } } /*==================================== Touch Devices ====================================*/ @media (hover:none){ .inamproductdetails-mainimage:hover img, .inamproductdetails-thumb:hover, .inamproductdetails-featurecard:hover, .inamproductdetails-primarybtn:hover, .inamproductdetails-secondarybtn:hover, .inamproductdetails-zoombtn:hover{ transform:none; } .inamproductdetails-thumb:hover::before, .inamproductdetails-featurecard:hover::before, .inamproductdetails-primarybtn:hover::before, .inamproductdetails-secondarybtn:hover::before, .inamproductdetails-zoombtn:hover::before, .inamproductdetails-badge::before{ animation:none; opacity:0; } } /*==================================== Reduced Motion ====================================*/ @media (prefers-reduced-motion:reduce){ .inamproductdetails-gallery, .inamproductdetails-content, .inamproductdetails-mainimage img, .inamproductdetails-featurecard, .inamproductdetails-thumb, .inamproductdetails-primarybtn, .inamproductdetails-secondarybtn, .inamproductdetails-badge, .inamproductdetails-zoombtn{ animation:none !important; transition:none !important; transform:none !important; } .inamproductdetails-featurecard{ opacity:1; } } /*==================================================== PRODUCT DETAILS RESPONSIVE PART 4 ABOUT PRODUCT ====================================================*/ /*==================================== 1600px ====================================*/ @media (min-width:1600px){ .inamproductabout-container{ width:min(1500px,92%); } } /*==================================== 1400px ====================================*/ @media (max-width:1400px){ .inamproductabout-container{ gap:40px; padding:40px; } } /*==================================== 1200px ====================================*/ @media (max-width:1200px){ .inamproductabout-container{ grid-template-columns:1fr 420px; gap:35px; } .inamproductabout-title{ font-size:34px; } } /*==================================== 992px ====================================*/ @media (max-width:992px){ .inamproductabout-container{ grid-template-columns:1fr; text-align:center; gap:40px; padding:35px 30px; } .inamproductabout-heading{ justify-content:center; } .inamproductabout-description{ margin-inline:auto; max-width:100%; } .inamproductabout-features{ grid-template-columns:1fr; } .inamproductabout-image{ order:-1; justify-content:center; } .inamproductabout-image img{ max-width:360px; } } /*==================================== 768px ====================================*/ @media (max-width:768px){ .inamproductabout-wrapper{ padding:60px 0; } .inamproductabout-container{ padding:30px 24px; } .inamproductabout-title{ font-size:30px; } .inamproductabout-description{ font-size:14px; line-height:1.8; } .inamproductabout-headingicon{ width:42px; height:42px; } } /*==================================== 576px ====================================*/ @media (max-width:576px){ .inamproductabout-container{ width:94%; padding:24px 20px; } .inamproductabout-title{ font-size:27px; } .inamproductabout-image img{ max-width:280px; } .inamproductabout-item{ align-items:flex-start; } } /*==================================== 480px ====================================*/ @media (max-width:480px){ .inamproductabout-title{ font-size:24px; } .inamproductabout-heading{ gap:10px; } .inamproductabout-headingicon{ width:38px; height:38px; font-size:15px; } .inamproductabout-item span{ font-size:13px; } } /*==================================== 375px ====================================*/ @media (max-width:375px){ .inamproductabout-title{ font-size:22px; } .inamproductabout-description{ font-size:13px; } } /*==================================== 320px ====================================*/ @media (max-width:320px){ .inamproductabout-container{ padding:18px 15px; } .inamproductabout-title{ font-size:20px; } .inamproductabout-image img{ max-width:220px; } .inamproductabout-check{ width:24px; height:24px; font-size:11px; } } /*==================================== Touch Devices ====================================*/ @media (hover:none){ .inamproductabout-item:hover, .inamproductabout-image:hover img{ transform:none; } } /*==================================== Reduced Motion ====================================*/ @media (prefers-reduced-motion:reduce){ .inamproductabout-wrapper *{ animation:none !important; transition:none !important; transform:none !important; } } /*==================================== Overflow Protection ====================================*/ @media (max-width:768px){ .inamproductabout-wrapper{ overflow:hidden; } } /*==================================================== PRODUCT DETAILS RESPONSIVE PART 5 PRODUCT FEATURES & RELATED PRODUCTS ====================================================*/ /*==================================== 1600px ====================================*/ @media (min-width:1600px){ .inamproductfeature-card, .inamrelatedtypes-container{ width:min(1500px,92%); } } /*==================================== 1400px ====================================*/ @media (max-width:1400px){ .inamproductfeature-card{ padding:45px 70px; gap:50px; } } /*==================================== 1200px ====================================*/ @media (max-width:1200px){ .inamproductfeature-card{ padding:40px 50px; gap:40px; } .inamproductfeature-list{ margin-left:20px; max-width:100%; } .inamrelatedtypes-grid{ grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); } } /*==================================== 992px ====================================*/ @media (max-width:992px){ .inamproductfeature-card{ grid-template-columns:1fr; gap:35px; padding:35px 30px; text-align:center; } .inamproductfeature-divider{ display:none; } .inamproductfeature-heading{ justify-content:center; } .inamproductfeature-list{ margin:0 auto; max-width:100%; } .inamrelatedtypes-wrapper{ padding:50px 0 30px; } .inamrelatedtypes-grid{ grid-template-columns:repeat(2,1fr); } } /*==================================== 768px ====================================*/ @media (max-width:768px){ .inamproductfeature-wrapper{ padding:30px 0 50px; } .inamproductfeature-card{ padding:30px 22px; } .inamproductfeature-headingtitle{ font-size:24px; } .inamproductfeature-listitem{ padding:10px 12px; } .inamrelatedtypes-headingtitle{ font-size:24px; } .inamrelatedtypes-imagebox{ height:190px; } .inamrelatedtypes-image{ max-width:130px; } } /*==================================== 576px ====================================*/ @media (max-width:576px){ .inamproductfeature-card{ width:94%; padding:25px 18px; } .inamproductfeature-headingtitle{ font-size:22px; } .inamproductfeature-list{ margin-left:0; } .inamproductfeature-listitem{ gap:12px; } .inamrelatedtypes-container{ width:94%; } .inamrelatedtypes-grid{ grid-template-columns:1fr; } .inamrelatedtypes-card{ width:100%; max-width:340px; margin:auto; } } /*==================================== 480px ====================================*/ @media (max-width:480px){ .inamproductfeature-headingtitle{ font-size:20px; } .inamproductfeature-listtext{ font-size:13px; } .inamproductfeature-listicon{ width:22px; height:22px; } .inamrelatedtypes-headingtitle{ font-size:21px; } .inamrelatedtypes-imagebox{ height:170px; } .inamrelatedtypes-image{ max-width:115px; } } /*==================================== 375px ====================================*/ @media (max-width:375px){ .inamproductfeature-card{ padding:20px 15px; } .inamproductfeature-headingtitle{ font-size:19px; } .inamrelatedtypes-headingtitle{ font-size:19px; } } /*==================================== 320px ====================================*/ @media (max-width:320px){ .inamproductfeature-headingtitle{ font-size:18px; } .inamproductfeature-listtext{ font-size:12px; } .inamproductfeature-listicon{ width:20px; height:20px; } .inamrelatedtypes-headingtitle{ font-size:18px; } .inamrelatedtypes-imagebox{ height:150px; } .inamrelatedtypes-image{ max-width:100px; } .inamrelatedtypes-content{ padding:15px; } } /*==================================== Touch Devices ====================================*/ @media (hover:none){ .inamproductfeature-listitem:hover, .inamrelatedtypes-card:hover, .inamrelatedtypes-card:hover .inamrelatedtypes-image{ transform:none; } } /*==================================== Reduced Motion ====================================*/ @media (prefers-reduced-motion:reduce){ .inamproductfeature-wrapper *, .inamrelatedtypes-wrapper *{ animation:none !important; transition:none !important; transform:none !important; } } /*==================================== Overflow Protection ====================================*/ @media (max-width:768px){ .inamproductfeature-wrapper, .inamrelatedtypes-wrapper{ overflow:hidden; } } /*==================================================== PRODUCT DETAILS RESPONSIVE PART 6 RECOMMENDED PRODUCTS & ENQUIRY ====================================================*/ /*==================================== 1600px ====================================*/ @media (min-width:1600px){ .inamrecommended-container, .enquiry-card{ max-width:1500px; } } /*==================================== 1400px ====================================*/ @media (max-width:1400px){ .inamrecommended-card{ flex:0 0 240px; } } /*==================================== 1200px ====================================*/ @media (max-width:1200px){ .inamrecommended-slider{ gap:18px; } .inamrecommended-card{ flex:0 0 220px; } .enquiry-card{ max-width:900px; } } /*==================================== 992px ====================================*/ @media (max-width:992px){ .inamrecommended-wrapper{ padding:40px 0; } .inamrecommended-card{ flex:0 0 210px; } .inamproducthero-supply{ justify-content:center; margin-left:0; flex-wrap:wrap; } .enquiry-card{ padding:35px 30px; } } /*==================================== 768px ====================================*/ @media (max-width:768px){ .inamrecommended-headingtitle{ font-size:24px; } .inamrecommended-imagebox{ height:150px; } .inamrecommended-image{ max-width:115px; } .inamrecommended-arrow{ width:40px; height:40px; } .inamproducthero-supply{ gap:12px; } .inamproducthero-supplyvalue{ font-size:20px; } .enquiry-wrapper{ padding:45px 15px 60px; background-attachment:scroll; } .enquiry-card{ padding:28px 22px; } .enquiry-grid-form, .dropdown-three-col{ grid-template-columns:1fr; } } /*==================================== 576px ====================================*/ @media (max-width:576px){ .inamrecommended-container{ width:94%; } .inamrecommended-sliderwrapper{ gap:10px; } .inamrecommended-card{ flex:0 0 100%; max-width:340px; } .inamrecommended-headingtitle{ font-size:22px; } .inamproducthero-supply{ flex-direction:column; align-items:center; } .inamproducthero-supplyseparator{ display:none; } .page-head h1{ font-size:28px; } .page-head p{ font-size:14px; } } /*==================================== 480px ====================================*/ @media (max-width:480px){ .inamrecommended-arrow{ width:36px; height:36px; font-size:12px; } .inamrecommended-imagebox{ height:140px; } .inamrecommended-image{ max-width:105px; } .inamrecommended-title{ font-size:14px; } .inamproducthero-supplytitle{ font-size:14px; } .inamproducthero-supplyvalue{ font-size:18px; } .enquiry-card{ padding:22px 18px; } .submit-btn{ width:100%; justify-content:center; } } /*==================================== 375px ====================================*/ @media (max-width:375px){ .inamrecommended-headingtitle{ font-size:20px; } .page-head h1{ font-size:24px; } } /*==================================== 320px ====================================*/ @media (max-width:320px){ .inamrecommended-card{ max-width:100%; } .inamrecommended-imagebox{ height:120px; } .inamrecommended-image{ max-width:90px; } .inamrecommended-title{ font-size:13px; } .enquiry-card{ padding:18px 15px; } .form-input, .form-select, .form-textarea{ font-size:13px; padding:10px 12px; } .submit-btn{ font-size:13px; padding:12px 18px; } } /*==================================== Touch Devices ====================================*/ @media (hover:none){ .inamrecommended-card:hover, .inamrecommended-card:hover .inamrecommended-image, .inamrecommended-arrow:hover, .submit-btn:hover{ transform:none; } } /*==================================== Reduced Motion ====================================*/ @media (prefers-reduced-motion:reduce){ .inamrecommended-wrapper *, .enquiry-wrapper *{ animation:none !important; transition:none !important; transform:none !important; scroll-behavior:auto !important; } } /*==================================== Overflow Protection ====================================*/ @media (max-width:768px){ .inamrecommended-wrapper, .enquiry-wrapper{ overflow:hidden; } } /*==================================================== CONTACT RESPONSIVE PART 1 CONTACT HERO ====================================================*/ /*==================================== 1600px ====================================*/ @media (min-width:1600px){ .contact-container{ max-width:1500px; } } /*==================================== 1400px ====================================*/ @media (max-width:1400px){ .contact-container{ gap:55px; } } /*==================================== 1200px ====================================*/ @media (max-width:1200px){ .contact-container{ grid-template-columns:1fr 460px; gap:45px; } .contact-left h1{ font-size:46px; } } /*==================================== 992px ====================================*/ @media (max-width:992px){ .contact-hero{ min-height:auto; padding:70px 25px; } .contact-container{ grid-template-columns:1fr; gap:45px; } .contact-left{ text-align:center; } .contact-info{ align-items:center; } .contact-left h1{ font-size:40px; } } /*==================================== 768px ====================================*/ @media (max-width:768px){ .contact-hero-wrapper{ background-attachment:scroll; } .contact-hero{ padding:60px 20px; } .contact-right{ padding:28px 22px; } .contact-left h1{ font-size:34px; } .contact-left p{ font-size:15px; } } /*==================================== 576px ====================================*/ @media (max-width:576px){ .contact-tag{ font-size:13px; padding:7px 16px; } .contact-left h1{ font-size:30px; } .contact-info div{ font-size:15px; } .contact-info i{ width:48px; height:48px; font-size:18px; } } /*==================================== 480px ====================================*/ @media (max-width:480px){ .contact-left h1{ font-size:27px; } .contact-right{ padding:22px 18px; } .input-group input, .input-group select, .input-group textarea{ padding:14px; font-size:14px; } } /*==================================== 375px ====================================*/ @media (max-width:375px){ .contact-left h1{ font-size:24px; } .contact-left p{ font-size:14px; } } /*==================================== 320px ====================================*/ @media (max-width:320px){ .contact-hero{ padding:45px 15px; } .contact-left h1{ font-size:22px; } .submit-btn{ font-size:14px; padding:14px; } } /*==================================== Touch Devices ====================================*/ @media (hover:none){ .submit-btn:hover{ transform:none; } } /*==================================== Reduced Motion ====================================*/ @media (prefers-reduced-motion:reduce){ .contact-hero-wrapper *{ animation:none !important; transition:none !important; transform:none !important; } } /*==================================================== ACCOUNT RESPONSIVE PART 1 DASHBOARD LAYOUT ====================================================*/ /*==================================== 1400px ====================================*/ @media (max-width:1400px){ .account-dashboard{ gap:30px; } } /*==================================== 1200px ====================================*/ @media (max-width:1200px){ .account-sidebar{ width:280px; } } /*==================================== 992px ====================================*/ @media (max-width:992px){ .account-dashboard{ flex-direction:column; } .account-sidebar{ width:100%; position:relative; top:0; } .account-info-grid{ grid-template-columns:1fr; } } /*==================================== 768px ====================================*/ @media (max-width:768px){ .account-dashboard{ padding:20px; } .account-card, .account-enquiry-card{ padding:24px; } .account-header{ flex-direction:column; align-items:flex-start; gap:18px; } .account-header h2{ font-size:28px; } .account-enquiry-card{ overflow-x:auto; } .account-enquiry-card table{ min-width:700px; } } /*==================================== 576px ====================================*/ @media (max-width:576px){ .account-sidebar{ padding:24px; } .account-user-avatar{ width:90px; height:90px; font-size:30px; } .account-user-card h3{ font-size:24px; } } /*==================================== 480px ====================================*/ @media (max-width:480px){ .account-dashboard{ padding:15px; gap:20px; } .account-card, .account-enquiry-card{ padding:18px; } .account-header h2{ font-size:24px; } .account-info-box{ padding:18px; } .account-info-box h4{ font-size:18px; } } /*==================================== 375px ====================================*/ @media (max-width:375px){ .account-sidebar{ padding:18px; } .account-sidebar-menu a{ padding:14px; font-size:14px; } } /*==================================== 320px ====================================*/ @media (max-width:320px){ .account-user-avatar{ width:80px; height:80px; font-size:26px; } .account-user-card h3{ font-size:20px; } .account-header h2{ font-size:21px; } } /*==================================== Touch Devices ====================================*/ @media (hover:none){ .account-sidebar-menu a:hover, .account-info-box:hover, .account-header button:hover{ transform:none; } } /*==================================== Reduced Motion ====================================*/ @media (prefers-reduced-motion:reduce){ .account-dashboard *{ animation:none !important; transition:none !important; transform:none !important; } } /*==================================== Edit Profile Inputs ====================================*/ /*1200px*/ @media (max-width:1200px){ .account-info-box input{ width:100%; } } /*992px*/ @media (max-width:992px){ .account-info-box input{ width:100%; font-size:15px; } } /*768px*/ @media (max-width:768px){ .account-info-box input{ width:100%; padding:10px 12px; font-size:14px; } } /*576px*/ @media (max-width:576px){ .account-info-box input{ width:100%; padding:10px; } } /*480px*/ @media (max-width:480px){ .account-info-box input{ width:100%; font-size:14px; padding:9px 10px; } } /*375px*/ @media (max-width:375px){ .account-info-box input{ font-size:13px; } } /*320px*/ @media (max-width:320px){ .account-info-box input{ width:100%; font-size:13px; padding:8px 10px; } } /* ========================================================= EXPLORE CATEGORIES WRAPPER ========================================================= */ .inam-productcategories-wrapper { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* Main container */ .inam-productcategories-container { width: 89% !important; margin-left: auto !important; margin-right: auto !important; background: #ffffff !important; border: 1px solid #e8ece7 !important; border-radius: 18px !important; padding: 22px !important; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04) !important; overflow: hidden !important; box-sizing: border-box !important; }