@tailwind base;
@tailwind components;
@layer components {
  /* header styles starts */
  .container {
    @apply max-w-[1340px] mx-auto;
  }
  .navbar {
    @apply bg-white border-gray-200 py-7;
  }
  .company-name {
    @apply self-center text-xs md:text-xl font-[800] xl:pl-3 pl-1 uppercase;
  }
  .mobile-btn {
    @apply inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200;
  }
  .navbar-links {
    @apply w-full flex items-center justify-end;
  }
  .header-links {
    @apply flex flex-col p-4 md:p-0 mt-4 border border-gray-100 bg-gray-50 md:flex-row md:space-x-8 md:mt-0 md:border-0 md:bg-white;
  }
  .nav-link {
    @apply p-0 font-semibold text-[#434343] transition-colors no-underline hover:text-[#ED1B24];
  }
  .tinymce-content ul {
    @apply list-disc list-inside pl-5; /* Tailwind classes for unordered lists */
  }
  .tinymce-content ol {
    @apply list-decimal list-inside pl-5; /* Tailwind classes for ordered lists */
  }
  .category-heading {
    @apply font-[600] text-[18px] mb-2;
  }
  .pills-wrapper {
    @apply flex flex-wrap gap-3;
  }
  .pill-link {
    @apply bg-[#fef3f4] hover:bg-[#ed1b24] hover:text-[#fff] transition duration-500 px-3 py-1 rounded-[6px];
  }
  .form-custom {
    @apply relative mx-auto w-max mr-6;
  }
  .search-header {
    @apply peer cursor-pointer relative z-10 h-12 w-12 rounded-2xl border border-[#EDEDED] bg-transparent pl-10 outline-none focus:w-full focus:cursor-text focus:border-[#ED1B24] focus:ring-[#ED1B24] focus:pl-10 focus:pr-4 transition-transform duration-75
  }
  .magnifier-icon {
    @apply absolute inset-y-0 left-1/2 translate-x-[-60%] my-auto h-8 w-7 pl-1 border-transparent peer-focus:translate-x-0 peer-focus:left-1;
  }
  .show-more-link {
    @apply flex mb-3 items-center text-base bg-[#ed1b24] text-[#fff] px-6 py-3 rounded-[8px];
  }

  .vote-btn {
    @apply flex items-center text-base bg-[#ed1b24] text-[#fff] px-6 py-2 my-1 rounded-[8px] cursor-pointer;
  }
  .active {
    @apply bg-[#ed1b24] text-[#fff];
  }
  .jobs {
    @apply bg-[#1B9BED] text-[#fff];
  }
  /* header styles ends */

  /* news body styles starts */
  .recent-body-division {
    @apply flex gap-3 items-baseline;
  }
  .news-columns-body {
    @apply flex flex-col max-w-[70%] w-full;
  }
  .news-heading {
    @apply font-[700] text-[26px] mb-2;
  }
  .recent-news-blogs-wrapper {
    @apply flex flex-wrap gap-0 gap-y-0;
  }
  .news-wrapper {
    @apply w-[32.3%] p-2 m-1 pb-7;
  }
  .sticky-note {
    @apply gap-2 text-[14px] text-[#3B3B3B];
  }
  .news-title {
    @apply flex gap-3 font-bold italic text-[16px];
  }
  .news-date {
    @apply text-sm;
  }
  .latest-pill {
    @apply flex items-center gap-1 bg-[#fffaeb] pt-[1px] px-3 rounded-[20px] font-normal w-max text-[13px] ;
  }
  .critical-pill {
    @apply flex items-center gap-1 bg-[#fef3f2] pt-[1px] px-3 rounded-[20px] font-normal w-max text-[13px] ;
  }
  .news-body-critical {
    @apply block  font-bold text-[#ff8515] hover:text-[#ff9590] transition duration-500 hover:underline;
  }
  .news-body {
    @apply block font-bold text-[#1A0DAB] hover:text-[#1A9Ddb] transition duration-500 hover:underline;
  }

  .thumbnail {
    @apply max-w-[120px] max-h-[120px] px-2 object-cover;
  }

  /* blog-details show page */
  .details-page-wrapper {
    @apply md:grid  grid-cols-[70%_28%] flex flex-col gap-[30px];
  }
  .mian-body-text {
    @apply text-[18px] text-[#3B3B3B];
  }

  /* pagination */
  .prev-btn {
    @apply flex items-center justify-center px-5 h-9 ml-0 leading-tight text-gray-500 bg-white border border-gray-300 rounded-lg hover:bg-[#f9fafb] hover:text-gray-700;
  }
  .next-btn {
    @apply flex items-center justify-center px-5 h-9 leading-tight text-gray-500 bg-white border border-gray-300 rounded-lg hover:bg-[#f9fafb] hover:text-gray-700;
  }
  .page-btn {
    @apply flex items-center justify-center px-4 h-9 rounded-lg leading-tight text-gray-500 hover:bg-[#f9fafb] hover:text-gray-700;
  }
  .pagination-news {
    @apply flex items-center h-8 text-[15px] gap-3;
  }

  /* third/sponsor column */
  .right-block {
    @apply max-w-[30%] w-full mb-[30px];
  }
  .sponsor-block {
    @apply bg-[#f4f4f4] p-5 py-2 w-full;
  }
  .sponsor-title {
    @apply text-[#363c3c] text-[20px] font-[700] mb-2;
  }
  .spons-post-title {
    @apply italic text-[16px] font-[600] mb-1;
  }
  .spons-body {
    @apply flex justify-between mb-1;
  }
  .spons_link {
    @apply block gap-[30px] underline text-[#1A0DAB] hover:text-[#1A9Ddb] transition duration-500 text-[15px];
  }
  .spons-text {
    @apply text-[14px] text-[#393939];
  }
  .horitotal-home-commrcl {
    @apply h-auto w-full mb-5 overflow-hidden;
  }
  .vertical-commrcl {
    @apply w-full lg:h-[600px] h-auto p-3 mt-12 bg-[#f4f4f4];
  }
  .news-commrcl {
    @apply w-full mb-7 md:block hidden;
  }
  .news-commrcl-mobile {
    @apply w-full mb-7 md:hidden block;
  }
  /* news body styles ends */

  /* newsletter styles starts */
  .newsletter-wrapper {
    @apply bg-[#FEF7F7] p-[40px] text-center;
  }
  .newsletter-title {
    @apply text-[32px] font-bold text-[#394452] mb-3;
  }
  .newsletter-intro {
    @apply text-[20px] text-[#6C6C6C] font-normal mb-2;
  }
  .email-wrapper {
    @apply flex items-center justify-center;
  }
  .get-newsletter {
    @apply border-0 py-[10px] pl-5 pr-[60px] w-[40%];
  }
  .newsletter-btn {
    @apply bg-[#ED1B24] text-[#fff] py-[10.5px] px-5 text-[14px] ml-[-99px] hover:bg-[#cc4b52] transition duration-500;
  }
  /* newsletter styles ends */

  /* terms & privacy styling starts */
  .main-title {
    @apply text-[#191919] md:text-3xl sm:text-2xl font-[700];
  }
  .privacy-text {
    @apply text-[#000] text-[20px];
  }
  .link-between-content {
    @apply text-[#1B7BFD] hover:text-[#84b5f8] transition ease-in-out font-[600];
  }
  .privacy-heading {
    @apply text-[32px] font-[600];
  }
  .privacy-sub_heading {
    @apply font-[500] text-[24px];
  }
  .privacy-text-18 {
    @apply text-[18px];
  }
  /* terms & privacy styling ends */

  /* get sponsored styling starts */
  .sponsored-wrapper {
    @apply mb-7;
  }
  .sponsored-main-title {
    @apply text-[#191919] md:text-3xl sm:text-2xl font-bold my-2;
  }
  .intro-text {
    @apply text-[#000] text-[20px] font-[400];
  }
  .sponsored-sub-heading {
    @apply md:text-2xl sm:text-xl font-[600] text-[#000];
  }
  .how-to-spons-block {
    @apply bg-[#FEF7F7] p-[40px] my-10;
  }
  .sponsored-diagram {
    @apply grid grid-cols-[350px_1fr_350px] gap-7;
  }
  .left-block-text {
    @apply text-[24px] pr-[30px];
  }
  .right-block-text {
    @apply text-[24px] pl-[30px];
  }
  .step-block {
    @apply flex items-center mb-10;
  }
  .step-views {
    @apply bg-white h-[111px] w-[300px] font-[500] text-[22px] text-center flex items-center justify-center pl-[75px] ml-[-75px] rounded-[0_100px_100px_0];
  }
  .block-right {
    @apply justify-end;
  }
  .step1-content {
    @apply mt-[55px];
  }
  .step2-content {
    @apply mt-[250px];
  }
  .step3-content {
    @apply mt-[170px];
  }
  .step4-content {
    @apply mt-[70px];
  }
  .divider-group {
    @apply flex items-center;
  }
  .divider {
    @apply block h-[4px] w-[100%] mb-0;
  }
  .divider-circle {
   @apply block w-[22px] h-[22px] rounded-full;
  }
  .step1 {
    @apply bg-[#FC5C7D]
  }
  .step2 {
    @apply bg-[#B86EB9]
  }
  .step3 {
    @apply bg-[#6A82FB]
  }
  .step4 {
    @apply bg-[#FE7208]
  }
  .sub-heading {
    @apply text-[24px] font-[500] mt-[12px];
  }
  .sub-sub-heading {
    @apply text-[18px] font-[600] mt-[2px];
  }
  /* mobile  */
  .mobile-sposored {
    @apply hidden;
  }
  /* get sponsored styling ends */

  /* footer starts */
  .footer {
    @apply flex items-center gap-[10rem];
  }
  .footer-company-wrapper {
    @apply flex flex-col items-center w-[30%];
  }
  .footer-company-name {
    @apply block w-full self-center text-2xl font-[800] uppercase;
  }
  .other-title {
    @apply text-[24px] mb-2;
  }
  .footer-links-wrapper {
    @apply flex gap-3;
  }
  .footer-link {
    @apply text-[#434343] transition-colors duration-500 hover:text-[#ED1B24];
  }
  .seprator {
    @apply bg-[#F2F2F2] h-[2px] mb-2;
  }
  .copyrights {
    @apply py-3 text-[#666] border-[#F2F2F2] text-[13px];
  }
  /* footer endss */

  /* contact us page style starts */
  .commrcl-bg {
    @apply bg-slate-100 rounded-2xl border border-[#E8E8E9];
  }
  .contact-wrapper {
    @apply max-w-[545px] mx-auto w-full;
  }
  .contact-title {
    @apply text-center text-[35px] font-[700] text-[#000] mb-1;
  }
  .contact-description {
    @apply text-[#000] mb-6;
  }
  .contact-fields-wrapper {
    @apply flex flex-col gap-5 mb-12;
  }
  .story-fields-wrapper {
    @apply flex w-full;
  }
  .contact-input {
    @apply border-[#E0E0E0];
  }
  .send-btn {
    @apply border-0 bg-[#ED1B24] text-[#fff] text-[16px] font-[700] py-3 cursor-pointer block;
  }
  .deatils-for-contact {
    @apply flex justify-between mb-[10rem];
  }
  .wrapper-static {
    @apply flex items-center gap-3;
  }
  .cont-detail {
    @apply flex flex-col font-[Montserrat] text-[#000] text-[13px];
  }
  .modal-info {
    @apply flex overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full bg-black bg-opacity-60 h-[100vh];
  }
  .modal-success {
    @apply  p-4 w-full max-w-[360px] max-h-full relative;
  }
  .modal-body {
    @apply relative bg-[#E3F3E6] rounded-lg shadow text-[#008E1F] flex gap-[12px] pl-[24px] pr-[32px] py-[12px];
  }
  .modal-tile {
    @apply text-[20px] font-[600];
  }
  .modal-para {
    @apply text-[14px] font-[400] text-[#0E6320];
  }
  /* contact us page style ends */
  /* submit story style starts */
  .submit-wrapper {
    @apply bg-[#fef3f4] p-6 mt-8 rounded-2xl;
  }
  .bottom-input {
    @apply w-full border-none bg-transparent px-4 py-3 text-gray-400 outline-none focus:outline-none rounded-l-2xl focus:ring-[#ED1B24];
  }
  /* submit story style starts */
}
@tailwind utilities;

input.get-newsletter[type='email'] {
  border-radius: 14px;
}
.send-btn,
input.newsletter-btn[type='submit'] {
  border-radius: 0px 14px 14px 24px;
}
.send-btn {
  @apply px-10;
}
.highlighted-news {
  @apply bg-[#fde7e9] rounded-sm;
}

/* mobile style */
@media (max-width: 640px) {
  /* header */
  main {
    @apply mx-4;
  }
  .footer-company-name {
    @apply text-sm;
  }
  /* category */
  .category-heading {
    @apply text-[20px];
  }
  .pills-wrapper {
    @apply gap-1
  }
  .pill-link {
    @apply text-[14px];
  }
  .news-wrapper {
    @apply w-full;
  }
  /* body news */
  .recent-body-division {
    @apply flex-col-reverse;
  }
  /* sponsor block */
  .right-block  {
    @apply max-w-[100%];
  }
  /* news columns */
  .news-columns-body {
    @apply max-w-[100%];
  }
  .recent-news-blogs-wrapper {
    @apply flex flex-wrap;
  }
  /* newsletter  */
  .newsletter-intro {
    @apply text-[14px] leading-[1.3] pb-[30px];
  }
  .get-newsletter {
    @apply w-full;
  }
  /* footer */
  .footer {
    @apply flex-col gap-3 justify-between;
  }
  .footer-company-wrapper {
    @apply w-full;
  }
  .footer-links-wrapper {
    @apply flex-col leading-[1.3] gap-1;
  }
  .footer-link {
    @apply text-[14px];
  }
  /* contact us page  */
  .contact-us-wrapper {
    @apply max-w-full;
  }
  .deatils-for-contact {
    @apply flex-col gap-2 mb-[5rem];
  }
  .wrapper-static {
    @apply w-full;
  }
  .main-title {
    @apply text-[30px];
  }
  .intro-text {
    @apply text-[18px];
  }
  .privacy-heading,
  .sponsored-sub-heading {
    @apply text-[24px];
  }
  .privacy-text-18 {
    @apply text-[16px];
  }
  .privacy-sub_heading,
  .sub-heading {
    @apply text-[20px];
  }
  .how-to-spons-block {
    @apply p-[20px];
  }
  .sponsored-desktop {
    @apply hidden;
  }
  .mobile-get-block {
    @apply m-0;
  }
  .mobile-step {
    @apply w-[100px] h-[100px];
  }
  .mobile-step-view {
    @apply w-[190px] text-[16px] ml-[-60px] h-[88px] pl-[35px];
  }
  .left-block-text,
  .right-block-text {
    @apply text-[18px];
  }
  .mobile-sposored {
    @apply flex flex-col;
  }
  .story-fields-wrapper {
    @apply flex-col;
  }
  .news-links {
    @apply w-full;
  }
  .send-btn {
    @apply rounded-[14px];
  }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */