@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Roboto+Slab:wght@100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body{
    background-image: url(../img/bodybg.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    font-family: "Roboto Slab", serif;
    font-optical-sizing: auto;
    font-weight: weight;
    font-style: normal;
    background-attachment: fixed;
    /*z-index:1;*/
}
.bg{
    background-image: url(../img/365.jpg); 
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
header{
   width: 100%;
   height: 31vh;
   display: flex;
   position: relative;

}

.logo img{
position: absolute;
top:-24px;
width: 150px; 
transition: top 0.3s;
}

.logo.scrolled{
    background-color: #000000a7;
    z-index: 1000;
}

.navbar{
    width: 100%;
    height: 75px;
    display: flex;
    justify-content: flex-end;
padding: 10px 20px;
    position: fixed;
    transition: top 0.3s;
    background:transparent;
}

.navbar.scrolled{
    background-color: #000000a7;
    z-index: 1000;
}

.navbar a{
    text-decoration: none;
    color: white;
    padding: 5px;
    margin-left: 5px;
    margin-top: 25px;
}

.navbar a:hover{
    color: #98781A;
}

   .drop-cont{
    top: 70px;
    min-width: 100px;
    background-color:#06c1cb85;
    padding: 10px;
    position: absolute;
    box-shadow: 3px 3px 3px rgba(190, 252, 255, .5);
    display: none;
}

.hamburger{
    display: none;
}

#button{
    display: flex;
    justify-content: center;
    align-items: center;
}

.drop-cont a{
    text-decoration: none;
    display: block;
    color: white;
    margin-top: 20px;
}

.down{
    margin-left: 5px;
    font-size: 12px;
}

.headertxt{
    width: 100%;
    height: 450px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.headertxt h1{
    font-size: 54px;
    color: white;
}

.headertxt small{
    width: 90%;
    font-size: 22px;
       color:white;
    margin-top: 30px;
    text-align: center;
}

.headertxt a{
    text-decoration: none;
    color: black;
    margin-top: 40px;
    margin-bottom: 250px;
    padding: 10px;
    border-radius: 10px;
    background-color: #98781A;
    box-shadow: 1px 1px 1px  #98781A
}

.headertxt a:hover{
    background-color:  rgb(213, 167, 3);
    color: white;
    box-shadow: 2px 2px 2px  rgb(213, 167, 3);
}

.container{
    width: 100%;
    height: auto;
    padding: 100px;
    background-color: rgb(19, 10, 10);
    display: flex;
    justify-content: center;
    align-items: center;
}

.wrapper{
    width: 60%;
    display: grid;
    grid-template-columns: auto auto;
    gap: 10%;
    justify-items:center;
    text-align: center;
    /* margin-bottom: 50px;    */
}

.wrapper div{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 2px solid black;
    border-radius: 15px;
    box-shadow: 5px 5px 4px rgb(0, 0, 3) ;
    padding: 30px;
    background-color: rgb(39, 20, 20);   
}

/* .pen{
    width: 55px;
    height: 55px;
    font-size: 32px;
    color: #ffc30e;
    background-color:#efb60a7f;
    padding: 10px;
    border-radius: 60px;
    box-shadow:  2px 2px 2px rgba(251, 255, 0, 0.5);
    margin-bottom: 20px;
}
.left{

    display: flex;
    flex-direction: column;
    width: 50%;
    align-items: center;
    justify-content: center;
} */


.wrapper div h5{
    color: white;
    font-size: 24px;
    margin: 10px;
}

.wrapper div p{
    color: white;
    font-size: 18px;
}

.wrapper div .fa-regular, .wrapper div .fa-light{
    width: 80px;
    height: 80px;
    font-size: 40px;
    text-align: center;
    box-shadow: 2px 2px 2px;
    padding: 20px;
    border-radius: 100px;
    margin: 10px;

}

.globe{
    color: #06c1cb;
    background-color:#00f2ff62 ;
    box-shadow: 2px 2px 2px rgba(3, 187, 243, 0.5);  
}

.pen{
    color: #ffc30e;
    background-color:#efb60a7f;
    box-shadow: 2px 2px 2px rgba(251, 255, 0, 0.5);
}

.desktop{
    color: #31f700;
    background-color:#5dff064c;
    box-shadow: 2px 2px 2px rgba(0, 255, 8, 0.5);
}
.user{
    color: #eb0808;
    background-color:#e30b0b48;
    box-shadow: 2px 2px 2px rgba(255, 0, 0, 0.5);
} 

/* 
.left h5{
    color: white;
    font-size: 21px;
}
.left p{
    color: white;
    font-size: 18px;
} */
/* .globe{
    width: 55px;
    height: 55px;
    font-size: 35px;
    color: #06c1cb;
    background-color:#00f2ff62 ;
    box-shadow:  2px 2px 2px rgba(3, 187, 243, 0.5);
    padding: 10px;
    border-radius: 60px;
    margin-bottom: 20px;
    margin-top: 150px;
} */

/* .right{
    display: flex;
    flex-direction: column;
    width: 50%;
    align-items: center;
    justify-content: center;
    margin-right: 120px;

}
.right h5{
    color: white;
    font-size: 21px;
}
.right p{
    color: white;
    font-size: 18px;
} */
/* .desktop{
    width: 55px;
    height: 55px;
    font-size: 32px;
    color: #31f700;
    background-color:#5dff064c;
    padding: 10px;
    border-radius: 60px;
    box-shadow:  2px 2px 2px rgba(0, 255, 8, 0.5);
    margin-bottom: 20px; 
}*/
/* .user{
    width: 55px;
    height: 55px;
    font-size: 32px;
    color: #eb0808;
    background-color:#e30b0b48;
    padding: 10px;
    border-radius: 60px;
    box-shadow:  2px 2px 2px rgba(255, 0, 0, 0.5);
    margin-bottom: 20px;
    margin-top: 170px;
} */

.ani-wrap{
    width: 100%;
    height: fit-content;
    background-color: rgb(19, 10, 10);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 80px 0;
}

.sidecont{
  width: 40%;
  margin: 0px 15px;
}

.sidecont h3{
    font-size: 32px;
    color: white;
}

.sidecont small{

    font-size: 24px;
    color: rgba(255, 255, 255, 0.662);
}

.sliders {
    width: 100%;
    max-width: 500px; /* Width of the slider container */
    height: 300px; /* Fixed height for slider */
    overflow: hidden;
    margin: 50px;
    position: relative;
}

.slides {
    display: flex;
    transition: transform 0.5s ease-in-out;
    width: 100%;
}

.slides img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Keeps the whole image visible */
    flex: 0 0 100%; /* Each image takes full width of the container */
    animation: slide 30s ease-in-out infinite both;
}

.dots {
    display: flex;
    justify-content: center;
    margin-top: 10px;
    padding-bottom: 20px;
}

.dots .dot {
    font-size: 12px; /* Size of the dot icon */
    margin: 0 5px;
    color: #bbb; /* Default color for inactive dots */
    cursor: pointer;
    transition: color 0.3s;
}

.dots .dot.active {
    color: #333; /* Color for the active dot */
}



@keyframes slide{
    0%{
        transform: translateX(0);
    }
    20%{
        transform: translateX(-100%);
    }
    40%{transform: translateX(-200%);
    }
    60%{
        transform: translateX(-300%);
    }
    80%{
        transform: translateX(-400%);
    }
    100%{
        transform: translateX(-500%);
    }
}

.pricing{
    width: 100%;
    background-color: #000;
    
}
.ptxt{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.ptxt h1{
  color: #fff;
  font-size: 39px;
  margin-top: 50px;
}
.ptxt small{
    color: #ffffffb4;
    font-size: 28px;
    margin-top: 5px;
    text-align: center;
}
.lent{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 35px;
}
.lent a{
    text-decoration: none;
    color: white;
    margin:60px 35px 0 35px;
    border-radius: 30px;
    border: 1px solid;
    padding: 15px;
    transition: all 1s;
}
.lent a:hover{
    background-color: #98781A;
}
/* Pricing Section Enhancements */


/* Purchase Button Styling */
.purchase-btn {
    display: inline-block;
    margin-top: 20px;
    padding: 12px 25px;
    color: #fff;
    background-color: #ffcc00; /* Same color as other action buttons */
    border-radius: 25px;
    text-transform: uppercase;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.purchase-btn:hover {
    background-color: #d4a800; /* Darker shade on hover */
}













.ourprices{
    height:fit-content;
}










.pricing {
    width: 100%;
    padding: 60px 0;
    background: #0a0a0a;
}

.pricing .ptxt h1 {
    font-size: 42px;
    color: #fff;
    text-align: center;
    margin-bottom: 10px;
}
.pricing-slider {
    display:grid;
    grid-template-columns: 2fr 2fr;
    align-items: center;
    gap: 20px;
    justify-content: center;
    width: 100%;
}
.pricing-slider > div {
    width: 80%; /* Adjust this to change the width */
    max-width: 750px;
    background: linear-gradient(135deg, #3b3b3b, #1e1e1e);
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    padding: 40px 20px;
    color: #fff;
    text-align: center;
    transition: transform 0.3s ease;
}

.pricing-slider > div:hover {
    transform: translateY(-5px);
}

.pricing-slider h3 {
    font-size: 26px;
    font-weight: 600;
    color: #ffcc00;
    margin-bottom: 15px;
}

.pricing-slider h2 {
    font-size: 36px;
    color: #ffcc00;
    margin: 15px 0;
}

.pricing-slider small {
    color: #bbb;
    font-size: 18px;
    margin-bottom: 20px;
}

.pricing-slider ul {
    list-style: none;
    padding: 0;
}

.pricing-slider ul li {
    font-size: 16px;
    margin: 10px 0;
    color: #ddd;
}

  
.opt1{

    height:600px;
    background-color: #0b0b0b;
    box-shadow: 5px 5px 10px  #0b0b0b;
    margin: 40px auto;
    display: flex;
    flex-direction: column;
}
.opt1 h3{
font-size: 50px;
    color: #fff;
    margin: 15px auto;
}
.opt1 h2{
   color: #98781A;
   font-size: 40px;
}
.opt1 small{
    color: #ffffff80;
    font-size: 25px;
}
.opt1 ul, li{
    color: white;
}
.opt1 a{
    text-decoration: none;
    color: #fff;
    margin: 120px auto;
    border-radius: 40px;
    padding: 15px;
    background-color: #98781A;
    margin-top: 40px;
}
.opt1 a:hover{
    background-color:  rgb(213, 167, 3);
}
.opt2{
    height:600px;
    background-color: #0b0b0b;
    box-shadow: 5px 5px 10px  #0b0b0b;
    margin: 40px auto;
    display: flex;
    flex-direction: column;
}
.opt2 h3{
    font-size: 50px;
    color: #fff;
    margin: 15px auto;
}
.opt2 h2{
    color: #98781A;
    font-size: 40px;
 }
 .opt2 small{
    color: #ffffff80;
    font-size: 25px;
 }
 .opt2 li{
     color: white;
 }
 .opt2 a{
    text-decoration: none;
    color: #fff;
    margin: 120px auto;
    border-radius: 40px;
    padding: 15px;
    background-color: #98781A;
    margin-top: 40px;
}

 .opt2 a:hover{
     background-color:  rgb(213, 167, 3);
 }
.opt3{
    height:600px;
    background-color: #0b0b0b;
    box-shadow: 5px 5px 10px  #0b0b0b;
    margin: 40px auto;
    display: flex;
    flex-direction: column;
}
.opt3 h3{
    font-size: 50px;
    color: #fff;
    margin: 15px auto;
}

.opt3 h2{
    color: #98781A;
    font-size: 40px
 }
 .opt3 small{
    color: #ffffff80;
    font-size: 25px;
 }
 .opt3 li{
     color: white;

 }
 .opt3 a{
    text-decoration: none;
    color: #fff;
    margin: 120px auto;
    border-radius: 40px;
    padding: 15px;
    background-color: #98781A;
    margin-top: 40px;
 }
 .opt3 a:hover{
     background-color:  rgb(213, 167, 3);
 }

 .opt4{
    height:600px;
    background-color: #0b0b0b;
    box-shadow: 5px 5px 10px  #0b0b0b;
    margin: 40px auto;
    display: flex;
    flex-direction: column;
}
.opt4 h3{
    font-size: 50px;
    color: #fff;
    margin: 15px auto;
}
.opt4 h2{
    color: #98781A;
    font-size: 40px
 }
 .opt4 small{
    color: #ffffff80;
    font-size: 25px;
 }
 .opt4 li{
     color: white;
     margin-top: 20px;
     margin-left: 7px;
 }
 .opt4 a{
    text-decoration: none;
    color: #fff;
    margin: 120px auto;
    border-radius: 40px;
    padding: 15px;
    background-color: #98781A;
    margin-top: 40px;
 }
 .opt4 a:hover{
     background-color:  rgb(213, 167, 3);
 }


















 .circle{
    color: #98781A;
 }
 .rtxt{
    width: 70%;
    margin: 0 auto;
 }
 .rtxt h1{
    color: #fff;
 }
 .rtxt p{
    color: #fff;
 }
 .ltxt{
    display: flex;
    width: 80%;
    margin: 70px auto;
 }
 .ltxt h3{
    color: #fff;
    margin-bottom: 30px;
 }
 .left1{
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
 }
 .right1{
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
 }
 .btxt{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
 }
 .btxt h2{
    color: #fff;
    margin: 10px auto;
    font-size: 30px;
 }
 .btxt small{
  font-size: 26px;
  color: #ffffff7c;
 }
 .btxt a{
    text-decoration: none;
    color: black;
    margin-top: 40px;
    margin-bottom: 250px;
    padding: 10px;
    border-radius: 10px;
    background-color: #98781A;
    box-shadow: 1px 1px 1px  #98781A;
    text-transform: uppercase;
}
.btxt a:hover{
    background-color:  rgb(213, 167, 3);
    color: white;
    box-shadow: 2px 2px 2px  rgb(213, 167, 3);
}

.tradingview-widget-container{
    background-color: #0a0a0a;
}
footer{
   background-color: #333333;
    width: 100%;
    height: 500px;
}
.fwrapper{
    width: 100%;
    display: flex;
}
.row1{
    width: 24%;
    display: flex;
    flex-direction: column; 
    align-items: center;
}
.row1 img{
    width: 150px;
}
.row1 a{
    text-decoration: none;
    color: #98781A;
    font-size: 18px;
    margin-bottom: 10px;
}
.row1 p{
    color: #fff;
    font-weight: 500;
    font-size: 18px;
}
.row2{
    width: 24%;
    display: flex;
    flex-direction: column; 
    align-items: flex-start;
    justify-content: center;
    margin: 0 auto;
}
.row2 h2{
   color: #fff;
   margin-top: 59px;
   margin-bottom: 10px;
}
.row2 li{
    margin-bottom:10px ;
    color: #fff;

}
.row2 li a{
    text-decoration: none;
    color: #ffffff80;
}
.row2 li a:hover{
    text-decoration: underline;
    color: #fff;
}
.row3{
    width: 24%;
    display: flex;
    flex-direction: column; 
    align-items: flex-start;
    justify-content: center;
    margin: 0 auto;
}
.row3 h2{
    color: #fff;
    margin-top: 59px;
    margin-bottom: 10px;
 }
 .row3 li{
     margin-bottom:10px ;
     color: #fff;
 
 }
 .row3 li a{
     text-decoration: none;
     color: #ffffff80;
 }
 .row3 li a:hover{
     text-decoration: underline;
     color: #fff;
 }
 .row4{
    width: 24%;
    display: flex;
    flex-direction: column; 
    align-items: flex-start;
    justify-content: center;
    margin: 0 auto;
}
.row4 h2{
    color: #fff;
    margin-top: 59px;
    margin-bottom: 10px;
 }
 .row4 li{
     margin-bottom:10px ;
     color: #fff;
     list-style: none;
 
 }
 .row4 li a{
     text-decoration: none;
     color: #ffffff80;
 }
 .row4 li a:hover{
     text-decoration: underline;
     color: #fff;
 }
 .fa-square-facebook{
    color: #1877F2;
    margin-right: 5px;
    font-size: 21px;
 }
 .solice{
    color: #C13584;
    margin-right: 5px;
    font-size: 21px;
 }
 .fa-whatsapp{
    color: #25D366;
    margin-right: 5px;
    font-size: 21px;
 }
 .fa-x-twitter{
    color: #000000;
    margin-right: 5px;
    font-size: 21px;
 }
 .fa-discord{
    color: #5865F2;
    margin-right: 5px;
    font-size: 21px;
 }
 .copy{
    width: 100%;
    display: flex;
    justify-content: center;
 }
 .copy small{
    color: #ffffffad;
    font-size: 18px;
    margin: 90px auto;
 }