.font-section {  display:flex;  gap:40px;  justify-content:space-between;  margin-bottom:20px; } .blue-btn:hover {   transform:scale(0.9) !important; } .font-column {  flex:1;  min-width:240px; } .weight-options {  display:flex;  flex-wrap:wrap;  gap:10px;  margin:10px 0; } .weight-options label {  display:flex;  align-items:center;  gap:4px; } .link-import-toggle {  display:flex;  gap:20px;  margin-bottom:10px; }   .controls, .preview-type-buttons, .shuffle-buttons, .cta-button { display:flex; gap:5px; flex-wrap:wrap; margin-bottom:20px;   }   .control-section { display:flex; flex-direction:column;   }   .control-section label { font-weight:bold; margin-bottom:5px;   }   .control-group { display:flex; gap:10px; align-items:center;   }   select, button { padding:8px; font-size:14px; min-width:160px; border:1px solid #ccc; border-radius:5px; cursor:pointer;   }   .preview { background:#fff; border-radius:8px; max-width:700px; margin:auto;   }   .heading { font-size:28px; font-weight:700; margin-bottom:10px;   } .preview-template { display:none;   }   .preview-template.active { display:block;   }   #fontModal { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0, 0, 0, 0.6); z-index:1000; justify-content:center; align-items:center;   }   #fontModal .modal-content { background:#fff; padding:20px; border-radius:8px; max-width:600px; width:90%; box-shadow:0 2px 10px rgba(0, 0, 0, 0.2);   }   #fontModal h2 { margin-top:0;   }   #fontModal textarea { width:100%; height:120px; font-size:12px; margin-top:10px;   }   #fontModal .modal-footer { text-align:right; margin-top:15px;   }   #fontModal button { margin-left:10px;   }   .logo-img-div{   width:180px;   height:80px;   margin-left:auto;   margin-bottom:20px;   border-radius:6px;   overflow:hidden;   border:1px solid #edf2f7; padding:10px; }  .main-div-s-img{  flex:1;   text-align:right; } .logo-img-div img{   width:100%;   height:100%;   object-fit:contain; }  .preview-template active{   max-width:700px;   margin:auto;   font-family:'Arial', sans-serif; }  #article{   font-family:'Arial', sans-serif; } .profile-inner-div{   background:#ffffff;   border-radius:8px;   box-shadow:0 5px 20px rgba(0, 0, 0, 0.05);   overflow:hidden;   font-family:'Arial', sans-serif; } .article-inner-div{   background:white;   border-radius:6px;   overflow:hidden;   box-shadow:0 2px 12px rgba(0, 0, 0, 0.06); } .car-inner-div{   background:white;   border-radius:8px;   overflow:hidden;   box-shadow:0 4px 15px rgba(0, 0, 0, 0.08);   font-family:'Arial', sans-serif;   display:flex;  } .cta-button {   margin-bottom:0 !important;   margin-top:25px; } @media(max-width:767px){ .control-group{   flex-direction:column; } }   @media(min-width:768px){ .mobile-btn-div {   display:none; }   } @media(max-width:767px){   .mobile-btn-div {   display:flex !important; } .preview-type-buttons {   display:none; } .shuffle-buttons {   display:none; } .mobile-btn-div {   margin:20px 0;   flex-wrap:wrap;   width:100%; } .mobile-btn-div button.blue-btn {   font-size:12px; }   } @media(max-width:379px){ .mobile-btn-div button {   width:100%; }   }   .profile-banner {  height:120px;  background:linear-gradient(90deg, #1a3a5f, #2d5a8b);  position:relative; } .profile-img-div {  position:absolute;  bottom:-50px;  left:30px;  width:100px;  height:100px;  border-radius:6px;  overflow:hidden;  border:4px solid white;  box-shadow:0 4px 12px rgba(0, 0, 0, 0.1); } .profile-img-div img {  width:100%;  height:100%;  object-fit:cover; } .profile-content {  padding:20px 30px 30px;  margin-top:60px; } .profile-contact-main-div {  display:flex;  justify-content:space-between;  align-items:flex-start; } .profile-cmpny-div {  font-size:16px;  color:#4a5568;  margin-bottom:20px; } .profile-social-div {  display:flex;  gap:10px; } .profile-social-media {  width:32px;  height:32px;  border-radius:4px;  background:#e6f7ff;  display:flex;  align-items:center;  justify-content:center; } .profile-details-div {  display:flex;  margin-top:25px;  gap:25px; } .profile-expertise-div, .profile-inner-contact-div {  flex:1; } .profile-exp-heading {  font-weight:600;  font-size:14px;  color:#1a3a5f;  margin-bottom:12px;  text-transform:uppercase;  letter-spacing:0.5px; } .profile-expertise {  display:flex;  flex-wrap:wrap;  gap:8px; } .profile-expertise span {  background:#f0f4f8;  color:#4a5568;  padding:6px 12px;  border-radius:4px;  font-size:13px; } .profile-contact-heading {  font-weight:600;  font-size:14px;  color:#1a3a5f;  margin-bottom:12px;  text-transform:uppercase;  letter-spacing:0.5px; } .profile-inner-con {  display:flex;  flex-direction:column;  gap:8px;  font-size:14px; } .profile-contacts {  display:flex;  align-items:center;  gap:8px; }  @media(max-width:550px){ .profile-details-div {   flex-direction:column; } .tool-main-div {   padding:30px 15px !important; } .profile-content {   padding:20px 15px; } .profile-contact-main-div {   flex-direction:column;   margin-bottom:10px; } .profile-cmpny-div {   margin-bottom:15px; } main#main .container.beauty {   padding:0 !important; }   }  .article-banner-div {  height:240px;  position:relative;  overflow:hidden; } .article-banner-div img {  width:100%;  height:100%;  object-fit:cover; } .article-banner-inner-div {  position:absolute;  top:0;  left:0;  right:0;  height:100%;  background:linear-gradient(   90deg,   rgba(0, 0, 0, 0.6) 0%,   rgba(0, 0, 0, 0.3) 50%,   rgba(0, 0, 0, 0) 100%  );  display:flex;  flex-direction:column;  justify-content:center;  padding:30px; } .article-banner-sm-text {  color:white;  font-size:12px;  font-weight:500;  text-transform:uppercase;  letter-spacing:1px;  margin-bottom:12px; } .article-banner-big-text {  color:white;  font-size:27px;  font-weight:400;  line-height:1.3;  text-shadow:rgba(0, 0, 0, 0.3) 0px 1px 3px;  max-width:500px;  font-family:Montserrat, sans-serif; } .article-content-div {  padding:30px; } .article-contact-div {  display:flex;  justify-content:space-between;  margin-bottom:25px;  padding-bottom:25px;  border-bottom:1px solid #edf2f7; } .article-name-img-div {  display:flex;  gap:15px;  align-items:center; } .article-profile-img {  width:48px;  height:48px;  border-radius:50%;  overflow:hidden;  background:#f0f0f0; } .article-profile-img img {  width:100%;  height:100%;  object-fit:cover; } .article-author-name {  font-weight:600;  color:#2d3748;  font-size:16px; } .article-desig-div {  font-size:14px;  color:#718096; } .article-publish-div {  display:flex;  align-items:center;  gap:12px;  color:#718096;  font-size:14px; } .article-publish-inner-div {  display:flex;  align-items:center;  gap:6px; } .article-subheading {  font-size:20px;  color:#2d3748;  margin-top:25px;  margin-bottom:15px;  font-weight:600; } .article-inner-review-div {  margin:25px 0;  padding:25px;  background:#f8fafc;  border-left:4px solid #3182ce; } .article-review-text {  font-style:italic;  color:#4a5568;  margin:0;  font-size:18px;  line-height:1.6; } .article-review-author {  margin:10px 0 0;  color:#718096;  font-weight:500; } .article-subheading {  font-size:20px;  color:#2d3748;  margin-top:25px;  margin-bottom:15px;  font-weight:600; } .article-trends-main-div {  display:flex;  gap:20px;  margin-bottom:25px; } .article-trend {  flex:1;  padding:20px;  background:#f8fafc;  border-radius:6px; } .article-trend-heading {  font-weight:600;  color:#2d3748;  margin-bottom:8px; } .article-trend-text {  margin:0;  font-size:14px;  color:#4a5568; } .article-trend {  flex:1;  padding:20px;  background:#f8fafc;  border-radius:6px; } .article-trend-heading {  font-weight:600;  color:#2d3748;  margin-bottom:8px; } .article-trend-text {  margin:0;  font-size:14px;  color:#4a5568; } .empty-div {  display:flex;  justify-content:space-between;  align-items:center;  margin-top:30px;  padding-top:25px; }  @media(max-width:767px){ .article-contact-div {   flex-direction:column; } .article-publish-div {   margin-top:15px; } .article-author-name.heading {   margin-bottom:0; } .article-content-div {   padding:20px; } .article-inner-review-div {   padding:15px; } p.article-review-text {   font-size:16px; } .article-trends-main-div {   flex-direction:column; } .empty-div {   display:none; } .article-banner-big-text {   font-size:20px; } .article-banner-inner-div {   padding:15px; }   } .card-blue-div {  width:12px;  background:linear-gradient(180deg, #1a3a5f 0%, #2d5a8b 100%); } .card-main-div {  flex:1;  padding:30px;  display:flex;  justify-content:space-between;  align-items:center; } .card-details-div {  flex:2; } .card-desig {  font-size:16px;  color:#4a5568;  margin-bottom:20px;  font-weight:500; } .card-time-div {  display:flex;  align-items:center;  gap:10px; } .card-social-div {  display:flex;  gap:12px;  justify-content:flex-end; } .card-media-so {  width:32px;  height:32px;  border-radius:4px;  background:#f0f7ff;  display:flex;  align-items:center;  justify-content:center; } .card-body-inner-div {  background:white;  border-radius:8px;  overflow:hidden;  box-shadow:0 4px 15px rgba(0, 0, 0, 0.08);  font-family:"Arial", sans-serif; } .card-body-blue-div {  height:12px;  background:linear-gradient(90deg, #1a3a5f 0%, #2d5a8b 100%); } .card-body-main-div {  padding:25px 30px;  text-align:center; } .card-body-img-div {  margin-bottom:15px; }  @media(max-width:767px){ .card-main-div {   flex-direction:column;   padding:15px; } .card-details-div {   width:100%; } .main-div-s-img {   width:100%;   text-align:left !important;   display:flex;   align-items:center;   margin-top:20px;   gap:20px; } .logo-img-div {   margin:0px 0 0px 0;   padding:3px;   height:45px; } .card-social-div {   justify-content:left; } } @media(max-width:410px){ .main-div-s-img {   flex-direction:column; } .card-blue-div {   width:8px; } .card-body-blue-div {   height:8px; }   }   button.displayActive {   background:linear-gradient(45deg, #1e55b2, #3477e8) !important; } .blue-btn1{   background:linear-gradient(45deg, #1e55b252, #3477e859);   } .blue-btn1 {   color:#fff;   border:unset;   cursor:pointer;   font-size:16px;   padding:10px 20px;   border-radius:5px;   transform:scale(0.9);   transition:0.5s !important;   text-transform:capitalize;   font-family:"Montserrat", sans-serif; } p.preview-type-heading, p.shfl-heading {   font-weight:700; } .preview-type-div {   margin-top:40px; } .blue-btn:hover {   background:linear-gradient(45deg, #092e6c, #082556) !important; } .blue-btn1:hover{   background:linear-gradient(45deg, #1e55b2, #3477e8) !important; }