:root {
    --darkBlue: #1A67CB;
    --lightBlue: #79B7DB;
    --blackText: #171717;
    --whiteText: #fff;
}
*{margin: 0;padding: 0;}
html,body{font-size: 16px; font-family: "Outfit", sans-serif; color: var(--blackText); font-weight: 200;}
.stickyMasterTopBar{background: #024162; color: #fff; padding: 10px 0;}
li{list-style: none;}
ul{margin-bottom: 0; padding-left: 0;}
a{text-decoration: none;}
a:hover{text-decoration: none;}
@media(min-width:1600px){ 
     .container-fluid{padding:0 50px; } .container{max-width: 1480px;}
    
}
@media(min-width:1200px){ 
.container-elevate{max-width: 100%; width: 100%; padding-left: 10%; padding-right: 4%;}
}
img{max-width: 100%;}
header{background: var(--darkBlue); position: sticky; top:0; z-index: 999; padding: 10px 0;}
header.fixed{background: rgba(26, 103, 203, 0.7);}

nav ul li a{padding: 10px 20px; display: block; color: var(--whiteText); font-size: 18px;}
nav ul li a .fa{font-size: 16px; font-weight: normal;  transition: all .3s ease-in-out 0s;}
nav ul li a:hover .fa{rotate: 180deg;}
nav ul li a:hover, nav ul li a.active{color: #d7d7d7;}
.navication{position: relative;}
.mainBanner{position: relative; padding-top: 60px;}
.mainBanner h1{font-size: 44px; color: var(--darkBlue); margin-bottom: 50px; font-weight: 400;}
.scheduleBtn{background: #fff; color: var(--darkBlue); border-radius:25px; display: inline-block; width: 200px; text-align: center; padding: 10px 0; transition: all .8s ease-in-out 0s; font-weight: 300;}
.scheduleBtn:hover{background: #69cce5;font-weight: 400; color: var(--whiteText); letter-spacing: 1px;}
.whiteText{color: var(--whiteText) !important;}
.blackText{color: var(--blackText) !important;}
.homeTitle{font-size: 45px; font-weight: 400;}
.tools-section {background:  radial-gradient(circle at 6.503906249999999% 88.037109375%, rgba(96,185,220,0.99) 0%, 34.95%, rgba(96,185,220,0) 50%), radial-gradient(circle at 25% 44.166666666666664%, #2B72CD 0%, 30%, rgba(43,114,205,0) 100%), radial-gradient(circle at 93.6865234375% 11.42578125%, #0156C5 0%, 63.6%, rgba(1,86,197,0) 100%), radial-gradient(circle at 48.9013671875% 49.521484375%, #FFFFFF 0%, 100%, rgba(255,255,255,0) 100%); padding: 60px 0px; color: white; text-align: center; margin: 60px 0;}
.tools-section em{font-weight: 500;}
.tools-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 40px;  max-width: 100%;}
.tool-card {display: flex; flex-direction: column; align-items: center; text-align: center; transition: all 0.3s ease;}
.tool-card p {  font-size: 16px;  line-height: 1.4;   margin: 0;  margin-top: 10px;}
.elevate-section{padding: 60px 0; }
.elevate-section .left-content {position: sticky;  max-width: 440px; top:140px;}
.elevate-section .left-content h3 {font-size: 26px; font-weight: 400;  margin-bottom: 3px;  color: var(--blackText);}
.elevate-section .left-content p {line-height: 1.4em; font-size: 18px;  color: var(--blackText);  margin-top: 20px;}
.elevate-section .right-card {color: #f4f4f4;  padding:80px 80px;  border-radius: 25px;  min-width: 300px;  text-align: left;  display: flex;  flex-direction: column;  justify-content: center; margin-bottom: 200px; position: sticky; top:140px;}
.darkBg {background-color: var(--darkBlue);}
.darkText {color: var(--darkBlue);}
.lightBg {background-color: #4b8ac6;}
.lightBg {background-color: #4b8ac6;}
.lightBg-3 {background-color: #60b9dc;}
.lightBg-4 {background-color: #69cce5;}
.elevate-section .right-card h3 { font-weight: 400;  margin-bottom: 10px;}
.elevate-section .right-card p { margin-top: 20px;  font-size: 20px; color: #f4f4f4; font-weight: 300;}
.font-18{font-size: 18px;}
.viewAllBtn{background: #fff; color: var(--darkBlue); border:1px solid var(--darkBlue);  border-radius: 25px;  display: inline-block; padding: 9px 0px; width: 300px; text-align: center; transition: all .8s ease-in-out 0s;}
.viewAllBtn:hover { background: #69cce5;  font-weight: 400;  color: var(--whiteText);  letter-spacing: .5px;}
.logo-container img {  max-width: 200px;  object-fit: contain;  transition: all .4s ease-in-out 0s; border:2px solid #fff;  cursor: pointer;}
.logo-container img:hover { transform: scale(1.08); border:2px solid #fff;}
.height-50{height: 50px;}
.websites-section .card {background: rgba(255, 255, 255, 0.7); display: flex;  flex-direction: row;  align-items: center;  gap: 30px;  padding: 30px;
  box-shadow: 0px 8px 25px rgba(0, 0, 0, 0.15);  flex: 1 1 45%;  min-width: 350px;  transition: transform 0.3s ease;}

.websites-section .card:hover { transform: translateY(-8px);}
.card-content { flex: 1;}
.card-content h2 { font-size: 32px;  margin-bottom: 15px;}
.card-content ul {   padding-left: 30px;  margin-bottom: 15px;}
.card-content ul li {list-style: disc; font-size: 18px;  }
.btnLearn{padding: 10px 0;  transition: all .8s ease-in-out 0s; display: inline-block; padding: 8px 0px; width: 200px; text-align: center; border-radius: 25px; transition: all .8s ease-in-out 0s; background: #fff;
  color: var(--darkBlue);
  border: 1px solid var(--darkBlue);}
  .btnLearn:hover{background: #69cce5; font-weight: 400;  color: var(--whiteText);  letter-spacing: .5px;}
.card-content p { font-size: 18px;  margin: 10px 0 20px;}
.card-image {flex: 0 0 auto; position: relative; overflow: hidden;}
.card-image img {width: 200px; height: auto; border-radius: 20px;  position:relative; z-index: 2;}
.card-image .video-thumb {width: 100%; position:relative;}
.card-image .video-wrapper{ position: absolute; top:0; left:0; width: 100%; height: 100%;}
.card-image .video-wrapper img{ z-index: inherit; padding: 13px 8px; height: 100% !important; width: 100% !important;object-fit: cover;}
.card-image span {position: absolute; left:0; top:0px; z-index: 1; padding: 5px;}
.card-image span img{height: 402px; object-fit: cover;}
.gradient-blue { background:  radial-gradient(circle at 6.503906249999999% 88.037109375%, rgba(96,185,220,0.5247) 0%, 34.95%, rgba(96,185,220,0) 50%), radial-gradient(circle at 25% 44.166666666666664%, rgba(43,114,205,0.53) 0%, 30%, rgba(43,114,205,0) 100%), radial-gradient(circle at 93.6865234375% 11.42578125%, rgba(1,86,197,0.53) 0%, 63.6%, rgba(1,86,197,0) 100%), radial-gradient(circle at 48.9013671875% 49.521484375%, rgba(255,255,255,0.53) 0%, 100%, rgba(255,255,255,0) 100%) !important;}

.gradient-darkblue { background: radial-gradient(circle at 6.503906249999999% 88.037109375%, rgba(96,185,220,0.5247) 0%, 34.95%, rgba(96,185,220,0) 50%), radial-gradient(circle at 25% 44.166666666666664%, rgba(43,114,205,0.53) 0%, 30%, rgba(43,114,205,0) 100%), radial-gradient(circle at 93.6865234375% 11.42578125%, rgba(1,86,197,0.53) 0%, 63.6%, rgba(1,86,197,0) 100%), radial-gradient(circle at 48.9013671875% 49.521484375%, rgba(255,255,255,0.53) 0%, 100%, rgba(255,255,255,0) 100%) !important;}


 .video-container {  width: 100%;   overflow: hidden;}

.video-container  video {width: 100%; height: auto;  display: block;}
.whyBluestarSection{background: #fff; padding: 50px;}
.whyBluestarSection h3.homeTitle{ color: var(--darkBlue); font-size: 70px; letter-spacing: 2px;}
.subtitle{ color: var(--darkBlue); font-size: 28px; font-weight: 400; }
.stats-section {padding: 60px 20px 0;  display: flex;   justify-content: center;   align-items: center;}

.stats-container {  display: grid;  grid-template-columns: 1fr 400px 1fr;    width: 100%;  }
.phone-frame {   width: 100%; position: relative; overflow: hidden; border-radius:20px;}
.phone-frame img{   width: 100%; position: relative; z-index: 2;}
.phone-frame video {  width: 100%;   display: block; position: absolute; top:0; left:0; padding: 10px 15px; z-index: 1;   object-fit: cover; }
.stat-item { margin-bottom: 60px;}
.stat-item h2 {  font-size: 32px;   font-weight: 400;   color: var(--darkBlue);}
.stat-item h3 { font-size: 22px;   font-weight: 400;  color: var(--darkBlue);  margin: 8px 0 20px;}
.stat-item p { font-size: 16px;  line-height: 1.6;   color: var(--blackText);}
footer{background: #ededed; }
.contentftp {font-size: 28px; font-weight: 400;}
.contentftp p{font-size: 18px; font-weight: 300; }
.contentftp .btnLearn{font-size: 16px; width:250px;}
.contentftp span{color: var(--darkBlue); font-weight: 400;}
.ftpBottom{background: var(--darkBlue); padding: 80px 0 20px; border-radius:50px 50px 0px 0;  position: sticky; top: 0; z-index: 9;}

.ftpLogo{margin-bottom: 80px;}
footer h5{color: #fff; font-weight: 400; font-size: 16px; margin-bottom: 12px;}
footer .ftpTop{position: sticky; top: 50px; padding: 100px 0;}

footer .ftpNav li a{color: #fff; margin-bottom: 4px;  display: block; font-weight: 300;}
footer .ftpNav li a:hover{color: #ddd; }
footer .btnLearn{background: transparent;}
footer .addreswarftp {color: #fff;  text-align: center; margin-bottom: 40px;}
.ftpSchedule h6{font-size: 45px; font-weight: 400; color: var(--darkBlue);}
.ftpSchedule p{font-size: 18px;}
.ftpSchedule .btnLearn{font-size: 18px; width: 220px;}
.ftpLogo img{width: 100%; max-width: 500px;}

@media(min-width:993px){
    .ftpSchedule {position: sticky; top: 0; z-index: 9; background: #fff;}
    .logo{margin-right: 10%;}
    .megamenuWapper{ overflow: hidden;  text-align: left; position: absolute; z-index: 99; left: 0;top: 100%;  background-color: #ededed;
  min-width: 50vw; transition: all .8s ease-in-out 0s; max-height: 0;}
    nav ul li:hover .megamenuWapper{visibility:visible;   max-height: 1000px;  background-color: #ededed;}
    nav ul li .megamenuWapper li{width: 33.333%;}
    nav ul li .megamenuWapper li a{font-size: 16px; color: var(--blackText);}
    
}  


@media(max-width:1500px){ 
    .tool-card p{font-size: 14px;}
    .tools-grid{grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));}
    
}
@media(max-width:1400px){ 
     .tools-grid{grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));}
    
}
@media(max-width:1340px){
    nav ul li a{font-size: 16px;}
    .logo{margin-right: 5%; max-width: 200px;}  
    .logo-container img{max-width: 160px;}  
    
} 
@media(max-width:1100px){
    .stats-container{grid-template-columns: 1fr 280px 1fr;}
    
}
@media(max-width:1024px){
     .logo{margin-right: 2%;} 
     nav ul li a{padding: 10px 15px;} 
    
    
}
@media(max-width:990px){     
    nav { margin: 0; padding: 0;width: 100%; position: fixed; left: 0; top: 0;  bottom: 0; right: 0; background-color: rgba(0, 0, 0, .4); overflow: hidden;  visibility: hidden;
    opacity: 0;   transition: all .5s ease-in-out;  z-index: -1;}
.logo img{max-width: 170px;}
nav .navication {  padding: 0;  margin: 0;  width: 100%;  height: 100vh;  background-color: #ededed;  left: -100%;  position: relative;  -webkit-transition: all .5s ease-in-out;  -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;    transition: all .5s ease-in-out;}
    nav .navHeader {   padding: 10px 15px;  background: var(--darkBlue); position: relative;}
    nav .navHeader .btnNavToggle {width: 35px; z-index: 99;  display: inline-block; color: #fff; text-align: center;  border: none;  position: absolute; right: 12px;  top: 50%; transform: translateY(-50%);}
    nav .navHeader .navLogo img { max-height: 12px;}
     nav .navHeader .btnNavToggle .iconfont {font-size: 30px;}
     nav ul li a, nav ul li a.active{color: #171717;}
      nav ul li a:hover{color: #fff;}
    nav.showMainNav { visibility: visible;  opacity: 1;  z-index: 99999;}
    nav.showMainNav .navication {  left: 0; visibility: visible;  opacity: 1;}
    nav .container-fluid{padding: 0;}
    nav .navication ul {  flex-wrap:wrap;}
    nav ul li:first-child {  border-top: none;}
    nav ul li {  width: 100%;  border-top: 1px solid #ddd;}
    .searchnav{padding: 10px 15px;}
    .scrollNone{overflow: hidden;}
    nav ul li a .fa{float: right; margin-top: 5px;}
    .megamenuWapper{display: none;}
    .navTitle{background: var(--darkBlue); color: var(--whiteText);}
     .logo-container {  gap: 35px; }
     .logo-container img { max-width: 100px;}
     .elevate-section .right-card{padding: 30px;}
     .elevate-section .right-card h3, .ftpSchedule h6{font-size: 28px;}
     .elevate-section .right-card p, .ftpSchedule p{font-size: 16px;}
     .stats-container{display: flex; flex-wrap:wrap; justify-content: center;}
     .stats-container .text-end {text-align: center !important;}
  
    
}

@media(max-width:766px){  
    .scheduleBtn{font-size: 14px; width: 140px;}
    .elevate-section{padding: 40px 0;}
    .elevate-section .left-content{top:100px;}
    .mainBanner{padding:40px 0 20px ;}
    .tools-section{margin-top: 40px;}
    .logo img{max-width: 130px;}
    .mainBanner h1{font-size: 28px;}
    .tools-grid{gap:25px}
    .tool-card p{font-size: 12px;}
    .mainBanner h1{margin-bottom: 30px;}
    .mainBanner{padding: 30px 20px 0;}
    .homeTitle{font-size: 28px;}
    .tools-section{padding: 40px 0 !important; margin-bottom: 0;  overflow: hidden;}
    .tools-section.height-50{padding: 20px 0 !important; margin-top: 20px; height: 10px;}
     .logo-container {  gap: 20px; }
     .elevate-section .left-content{margin-bottom: 40px; text-align: center;}
     .elevate-section .right-card .seo-image{padding: 0 25px;}
     .logo-container{flex-wrap:wrap; }
     .affiliates-logos{padding-top: 40px;}
     .websites-section{margin-top: 40px;}
     .websites-section .card{flex-direction:column;}
     .card-content{text-align: center; padding: 0 20px;}
     .card-content ul li{text-align: left; font-size: 16px;}
     .whyBluestarSection h3.homeTitle{font-size: 40px;}
     .stats-section{padding:0;}
     .contentftp{font-size: 22px;}
     .mobileMargin{margin-top: -200px !important;}
    [data-aos^="fade"][data-aos^="fade"]{opacity: 1; transform: translateZ(0);}
    .ftpLogo img{width: 100%; max-width: 240px;}
    footer .ftpTop, footer .ftpBottom{position: static;}
    footer .ftpTop, footer .ftpBottom{padding: 40px 0;}
    footer .ftpBottom{margin-top: 0;}
    .ftpLogo{margin-bottom: 50px;}
    .whyBluestarSection{padding: 50px 20px;}
    .stat-item{margin: 20px 0;}
    .container, .container-fluid{padding: 0 20px;}
    .websites-section .card{padding-left: 0px; padding-right: 0px;}
    .video-container{padding: 0 5%;}
    .subtitle{font-size: 24px;}
    .websites-section .card{min-width: 100%; width: 100%;}
       .websiteBlock .card-image .mobileImg {width: 258px; margin: 0 auto; position: relative;}

}
@media(max-width:400px){
    .tools-grid{grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));}
}