main#main {   width:100% !important; } .single-tools .wrapper > .container .tool-content-main-div.container {   max-width:100% !important; } .tool-main-div {   background:unset;   box-shadow:unset !important; } textarea#textileEditor {   margin:0 !important; } .export-toolbar {   justify-content:flex-end; } @media(max-width:767px){   .tool-main-div {  padding:0 !important;   } } @media(max-width:495px){   .toolbar{  gap:7px !important;  padding:20px 10px !important;   } } @media(max-width:441px){   .toolbar button{   padding:6px 9px;   }   .toolbar button img{  width:20px;  height:20px;   } }  .tool-main-div {   max-width:1920px;   margin:0 auto;   padding:40px 60px;   box-sizing:border-box; } .tool-heading {   text-align:center;   font-size:2.8rem;   font-weight:700;   color:#1e2a38;   margin-bottom:30px;   letter-spacing:1px;   text-transform:uppercase; } .textile-main-div {   display:flex;   background:#fff;   border-radius:16px;   overflow:hidden;   height:82vh; } .editor, .preview-container {   flex:1;   display:flex;   flex-direction:column; } .toolbar, .export-toolbar {   display:flex;   align-items:center;   gap:16px;   padding:10px 24px;   background-color:#f1f5fa;   border-bottom:1px solid #dee4ec;   flex-wrap:wrap; } .toolbar button, .export-toolbar button {   background:#ffffff;   border:1px solid #dcdfe4;   border-radius:8px;   padding:8px 8px;   cursor:pointer;   box-shadow:0 2px 4px rgba(0,0,0,0.05);   transition:all 0.25s ease; } .toolbar button:hover, .export-toolbar button:hover {   background-color:#eaf3ff;   border-color:#a4c8f0; } .toolbar button img, .export-toolbar button img {   width:20px;   height:20px;   filter:grayscale(30%) brightness(90%);   transition:0.3s ease;   display:flex;   align-items:center; } .toolbar button:hover img, .export-toolbar button:hover img {   filter:none; } textarea#textileEditor {   flex:1;   padding:24px;   font-family:'Source Code Pro', monospace;   font-size:16px;   border:none;   border-radius:0;   outline:none;   background:#fcfcfc;   color:#333;   resize:none;   box-shadow:inset 0 0 4px rgba(0, 0, 0, 0.03); } .preview-container {   background-color:#fafafa;   border-left:1px solid #dee4ec; } .preview {   flex:1;   padding:24px 32px;   overflow-y:auto;   font-family:'Georgia', serif;   font-size:16px;   line-height:1.6;   color:#222; } @media (max-width:1440px) {   .tool-main-div {  padding:30px;   }   .textile-main-div {  flex-direction:column;  height:auto;   }   .preview,   textarea#textileEditor {  height:50vh;  width:100%;   }   .editor, .preview-container{  display:block !important;   } } @media (max-width:768px) {   .toolbar,   .export-toolbar {  justify-content:center;   }   button img {  width:20px;  height:20px;   }   .tool-heading {  font-size:2rem;   } }