@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');

 body {
   background-color: #fdfdfd;
   font-family: "Lato", sans-serif;
 }

 .alert-box {
   background-color: #f1f7fc;
   padding: 2rem;
   border-radius: 10px;
   text-align: center;
   animation: fadeInDown 1s ease-out;
   margin-bottom: 3rem;
 }

 .alert-box h2 {
   font-weight: 700;
   font-size: 40px;
   color: #000;
 }

 .alert-box p {
   font-size: 28px;
   font-weight: 500;
   margin: 0;
 }

 .alert-box a {
   color: #007bff;
   text-decoration: none;
 }

 .alert-box a:hover {
   text-decoration: underline;
 }

 .video-box {
   margin-bottom: 30px;
   animation: fadeInUp 1.2s ease-in;
 }

 .max-1220 .container {
   max-width: 1220px;
 }

 .ratio {
   box-shadow: 0 20px 10px -5px #ccc;
   border-radius: 20px;
   overflow: hidden;
 }

 .promo-link {
   background-color: #8b5cb1;
   color: white;
   padding: 16px 4rem;
   border-radius: 10px;
   display: inline-block;
   text-align: center;
   text-decoration: none;
   margin-bottom: 30px;
   transition: background-color 0.3s;
   font-size: 28px;
 }

 .promo-link:hover {
   background-color: #763ea3;
   text-decoration: none;
 }

 .promo-image {
   max-width: 100%;
   border-radius: 10px;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
   margin-bottom: 30px;
 }

 .cta-button {
   background-color: #2a4fa1;
   color: white;
   border: none;
   padding: 1.5rem 16px;
   width: 100%;
   font-size: 2rem;
   font-weight: 600;
   border-radius: 10px;
   transition: background-color 0.3s;
 }

 .cta-button:hover {
   background-color: #1c3c85;
 }

 .tab-icon {
   width: 100%;
   padding: 20px;
   max-width: 150px;
   text-align: center;
   border-radius: 10px;
   cursor: pointer;
   transition: transform 0.2s ease-in-out;
 }

 .tab-icon:hover {
   transform: translateY(-5px);
 }

 .nav-pills .nav-link.active {
   background-color: #f1f1f1;
   border: 2px solid #007bff;
 }

 .tab-pane {
   animation: fadeIn 0.5s ease-in;
 }

 @keyframes fadeIn {
   from {
     opacity: 0;
     transform: translateY(10px);
   }

   to {
     opacity: 1;
     transform: translateY(0);
   }
 }

 .download-btn {
   background-color: #2a4fa1;
   color: white;
   padding: 12px 24px;
   font-size: 20px;
   font-weight: 600;
   border-radius: 40px;
   border: none;
   margin: 15px 0;
   transition: background-color 0.3s;
   box-shadow: 0 8px 10px -6px #0000004d;
   font-size: 18px;
   display: inline-flex;
    align-items: center;
    gap: 8px;
 }

 .download-btn:hover {
   background-color: #1e3e80;
 }

 .resource-btn {
   background: rgb(42, 79, 161);
   border-radius: 2rem;
   box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
   padding: 12px 20px;
   margin: 8px;
   font-weight: 500;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   transition: all 0.3s ease;
   border: none;
   white-space: nowrap;
   color: #fff;text-decoration: none;
 }

 .resource-btn:hover {
   transform: translateY(-3px);
   box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
   background-color: rgb(42, 79, 161);
	 color:#f7f7f8;
 }

 .resource-btn i {
   margin-left: 8px;
 }

 .bundle-card {
   background: #E9EAEF;
   padding: 16px 30px;
   border-radius: 50px;
   font-weight: 600;
   display: inline-flex;
   align-items: center;
   gap: 12px;
   transition: background-color 0.3s ease;
   text-decoration: none;
   text-transform: uppercase;font-size: 20px;
 }
 .bundle-card img{max-width: 60px;}

 .bundle-card:hover {
   background: #d6d6d6;
 }

 .bundle-card i {
   font-size: 2rem;
 }

 .section-title {
   font-weight: 600;
   color: #2a2a2a;
   font-size: 1.2rem;
   margin-top: 40px;
 }

 .bundle-text {
   text-align: center;
   margin-top: 30px;
   font-size: 18px;
   color: #2A396C;
 }
 .bundle-text strong {
   font-size: 20px;font-weight: 600;
 }

 .bundle-wrapper {
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
   gap: 20px;
   margin-top: 20px;
 }



 @keyframes fadeInDown {
   from {
     opacity: 0;
     transform: translateY(-20px);
   }

   to {
     opacity: 1;
     transform: translateY(0);
   }
 }

 @keyframes fadeInUp {
   from {
     opacity: 0;
     transform: translateY(20px);
   }

   to {
     opacity: 1;
     transform: translateY(0);
   }
 }



 .scrolling-tabs {
   overflow-x: auto;
   white-space: nowrap;
   display: flex;
   gap: 10px;
   padding-bottom: 10px;
   margin-bottom: 5px;
 }

 .scrolling-tabs::-webkit-scrollbar {
   height: 6px;
 }

 .scrolling-tabs::-webkit-scrollbar-thumb {
   background-color: #ccc;
   border-radius: 10px;
 }

 .scroll-tab {
   display: inline-flex;
   flex-direction: column;
   gap: 10px;
   padding: 18px 16px;
   border-radius: 10px;
   font-weight: 600;
   background-color: #e9e9e9;
   cursor: pointer;
   transition: background-color 0.3s;
   text-transform: uppercase;
   width: 100%;
   font-size: 16px;
   max-width: 150px;
   white-space: normal;
   line-height: 1.2;
 }

 .scroll-tab img {
   max-width: 80px;
   max-height: 76px;
   margin: auto;
 }
.control {
   background-color: #304A9D10;
   color: #304A9D;
 }
.control:hover,
.control.active {
   background-color: #304A9D80;
   color: #fff;
 }

.quilter {
   background-color: #ef4b7411;
   color: #EF4B75;
 }
 .quilter:hover,
.quilter.active {
   background-color: #ef4b7480;
   color: #fff;
 }

.stitch {
   background-color: #368CA410;
   color: #368CA4;
 }
 .stitch:hover,
 .stitch.active {
   background-color: #368CA480;
   color: #fff;
 }

.master {
   background-color: #F29A4C10;
   color: #F29A4C;
 }
 .master:hover,
 .master.active {
   background-color: #FFB80080;
   color: #fff;
 }

.fusion {
   background-color: #F29A4C10;
   color: #F29A4C;
 }
 .fusion:hover,
 .fusion.active {
   background-color: #F29A4C80;
   color: #fff;
 }

.express {
   background-color: #41AD4910;
   color: #41AD49;
 }
 .express:hover,
 .express.active {
   background-color: #41AD4980;
   color: #fff;
 }

.album {
   background-color: #934F9110;
   color: #934F91;
 }
 .album:hover,
 .album.active {
   background-color: #934F9180;
   color: #fff;
 }

 .tab-pane h4 span {
    display: inline-block;
    background: #596EB0;
    border-radius: 10px;
    padding: 5px 2rem;color: #fff;
}
 .tab-pane h5{font-weight: 600;font-size: 20px;color: #2A396C;padding: 20px 0;margin: 0;}

 .linkout{
  background: url(../images/outLink_wh.png);
  width: 20px;height: 20px;display: inline-block;
 }