@import url('https://fonts.googleapis.com/css2?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');

*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Roboto", system-ui;
    font-weight: 400;
}
body
{
    width:100%;
    overflow-x: hidden;
    background-color: #000;
}
.bg-black
{
    min-height: 100vh;
    min-width: 100vw;
    opacity: 0.65;
    background-color: black;
    z-index:2;
    position: absolute;
    top: 0;left:0;
    background: transparent;
}
.bg-image
{
    background: url('bg.jpg');
    background-size: cover;
    width: 100vw;
    height:100vh;
    z-index:1;
}
.logo
{
    position:absolute;
    top:2%;left:10%;
    z-index:999;
}
.menu
{
position: absolute;
top:5%;right:10%;
z-index:999;
}
.menu .btn
{
    height:30px;
    width:70px;
    background-color: rgb(229,9,20);
    padding: 3px;
    border-radius:4px;
    margin-left: 5px;
    margin-bottom: 3px;font-size:14px;
    font-weight: 500;
}
.menu select
{
    font-size:14px;
}
.menu a
{
    text-decoration: none;
    color:rgb(255,255,255);

}
.menu .btn:hover
{
    background-color: rgb(193,17,25);
    color:white;
}

main .content
{
    position: absolute;
    top:50%;left:50%;
    transform: translate(-50%,-50%);
    z-index: 999;
    font-family: Netflix Sans, Helvetica Neue, Segoe UI, Roboto, Ubuntu, sans-serif;
    color:white;
    min-width:35rem;
    margin: 1.7rem 0;
    padding:3.6rem auto 3.6rem auto; 
}
main .content h1
{
    font-size:3.5rem;
    font-weight:bolder;
    text-align: center;
}
main .content .one
{
    margin-bottom:2rem;
}
main .outter
{
    background: linear-gradient(to bottom,black,rgb(8, 8, 31));
}
.content .one p
{
    text-align: center;
    font-size: 20px;
}
.content .two p
{
    margin-left:30px;
}
.content .two input
{
    height:50px;
    width: 350px;
    padding:1rem;
    background: transparent;
    font-size: 1rem;
    line-height: 1.5rem;
    border: 0.1px solid #b6b4b4;
    color: #fff;
    border-radius:5px ;
}
.content input:focus,.last input:focus
{
    outline: 2px solid white;
    border: 3px solid #000;
    border-radius:8px;
}
input:focus::placeholder,.last input:focus::placeholder
{
    color:#b6b4b4;
    font-size:12px;opacity: 0.45;
}
input::placeholder
{
    font-weight:400;
    color: #f3ebeba4;font-size: 15px;
}
.content button,.last button
{
    background-color:rgb(229,9,20);
    color: #fff;
    height: 50px;
    width: 200px;
    border-radius: 5px;
    border: none;outline: 0;
    font-size: 22px;
    margin-left: 0.5rem;
}
.content button:hover,.last button:hover
{
    background-color: rgb(193,17,25);
}
.curve
{
height:10px;
width:100%;
border-radius:50%;
background: linear-gradient(to right, rgba(33, 13, 22, 1) 16%, rgba(184, 40, 105, 1), rgba(229, 9, 20, 1), rgba(184, 40, 105, 1), rgba(33, 13, 22, 1) 84%);
}
.three
{
    margin-left:110px;
    padding-top: 70px;
}
.three p
{
    color: #fff;
    font-size: 25px;
}
.slide
{
    width:100%;   
}
.slide .row
{
    margin:20px 85px;
    width:100%;
}
.slide .card img:hover,.quries .card img:hover
{
    transform: scale(1.09);
    transition:all 0.2s linear;
}
.quries
{
    width: 100%;
}
.quries .row
{
    margin: 10px 70px;
    width: 100%;
}
section
{
    background-color: #000;
}
.three select
{
    font-size: 1rem;
    color:#fff;
    background-color: #0c0c0c;
    padding:5px;
    margin-right: 25px;
}
select
{
    width:100px;
    height:30px;
    padding:4px 5px;
    background-color: black;
    color: #fff;
}
.last 
{
margin-top: 70px;
margin-left: 250px;
}
.last p
{
    color:whitesmoke;
}
.last input
{
    height:50px;
    width: 500px;
    padding:1rem;
    background: transparent;
    font-size: 1rem;
    line-height: 1.5rem;
    border: 0.1px solid #b6b4b4;
    color: #fff;
    border-radius:5px ;
}

.box2 .heading
{
    margin-left:50px;
    margin-bottom: 25px;
}
.box2 .row
{
    margin:0px 30px
}
.box2 .card-1
{
    background:linear-gradient(149deg,#192247 0%, #210e17 99.08%);
    height:290px;
    border-radius: 15px;
}
.box2 .card-2
{
    background:linear-gradient(149deg,#192247 0%, #210e17 99.08%);
    height:290px;
    border-radius: 15px;
}
.box2 .card-3
{
    background:linear-gradient(149deg,#192247 0%, #210e17 99.08%);
    height:290px;
    border-radius: 15px;
}
.box2 .card-4
{
    background:linear-gradient(149deg,#192247 0%, #210e17 99.08%);
    height:290px;
    border-radius: 15px;
}
.box3 h4
{
    margin-left: 50px;
}
.container .accordion
{
    width:90%;
    margin-left: 50px;
    margin-top: 50px;
}
.container .accordion-item
{
    background:transparent;
    border: none;
}
.container .accordion-button
{
    background: #333;
    color:#fff;
    padding: 20px;
    font-size:20px;
    margin:8px 0px;
    border: none;   
}
.container .accordion-button:focus
{
    border: none;
    box-shadow: none;
}
.container .accordion-button:not(.collapsed)
{
    box-shadow: none;
    background: #333;
    color: #fff;
    border: none;margin: 0;
}
.container .accordion-body 
{
    padding: 15px;
    color: #fff;
    background: #383838;
    font-size: 20px;line-height: 35px;

}
.container .accordion-button:hover
{
    opacity: 0.85;
}
.container .accordion-button::after
{
    transition: all 0.5s;
    transform: scale(1.25);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-lg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2'/%3E%3C/svg%3E");
}
.container .accordion-button:not(.collapsed)::after
{
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23fff' class='bi bi-x-lg' viewBox='0 0 16 16'%3E%3Cpath d='M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8z'/%3E%3C/svg%3E");
}
.box4
{
    margin-left:80px;
    color:rgba(255,255,255,0.7);
    background-color:#000;
}
.para
{
    letter-spacing:1px;
    margin-left:33px;
}
.para a
{
    cursor:pointer;
    color:rgba(255,255,255,0.7);
}
.final ul li
{
    list-style-type: none;
    padding:4px;
}
.final li a
{
    color:rgba(255,255,255,0.7);
    font-size:13px;
}
.select select
{
    margin:25px 0px;
    width:150px;
    height:40px;
    font-size:14px;
}
.para1
{
    font-size:14px;
    width: auto; height: 100px;

}
.content .success input
{
     border-color: #0cc477;
}

.content .error input
{
     border-color:rgb(193,17,25);
}
.content .error input:focus,.last .error input:focus
{
    outline: none;
}
.last .success input
{
     border-color: #0cc477;
}

.last .error input
{
     border-color:rgb(193,17,25);
}

#error
{
    color: rgb(229,9,20);
    font-size: 14px;
    margin-top: 5px;
}

#carousel-btn
{
    background-color:rgba(255,255,255,0.1);
    border: 2px solid rgba(255,255,255,0.1);
    border-radius: 50px;
    height:5.5rem;
    width:1.5rem;
    position:absolute;top:35%;left:5%;
}
#carousel-btn:hover
{
    background-color: rgba(255,255,255,0.2);
}
#carousel-btn1
{
    background-color:rgba(255,255,255,0.1);
    border: 2px solid rgba(255,255,255,0.1);
    border-radius: 50px;height:5.5rem;
    width:1.5rem;position:absolute;top:35%;right:6%;
}

#carousel-btn1:hover
{
    background-color: rgba(255,255,255,0.2);
}
@media screen and (max-width:2600px)
{
    .quries
    {
        display: none;
    }
}

@media screen and (max-width:1400px)
{
    .box4 .media button
    {
      display: none;
    }
    .quries
    {
        display: none;
    }
    
}

@media screen and (max-width:1200px)
{
    .box2 .card-1,.box2 .card-2,.box2 .card-3,.box2 .card-4
    {
        min-height:180px;
        min-width:250;
        margin: 15px;
    }

    .content .two input
    {
    height:50px;
    width: 340px;
    padding:1rem;
    background: transparent;
    font-size: 1rem;
    line-height: 1.5rem;
    border: 0.1px solid #b6b4b4;
    color: #fff;
    border-radius:5px ;
    }

    .content button,.last button
    {
    background-color:rgb(229,9,20);
    color: #fff;
    height: 50px;
    width: 180px;
    border-radius: 5px;
    border: none;outline: 0;
    font-size: 20px;
    margin-left: 0.5rem;
    }

    .quries
    {
        display: none;
    }

    #carousel-btn1
    {
    background-color:rgba(255,255,255,0.1);
    border: 2px solid rgba(255,255,255,0.1);
    border-radius: 50px;height:5.5rem;
    width:1.5rem;position:absolute;top:35%;right:4%;
    }
    #carousel-btn
    {
    background-color:rgba(255,255,255,0.1);
    border: 2px solid rgba(255,255,255,0.1);
    border-radius: 50px;
    height:5.5rem;
    width:1.5rem;
    position:absolute;top:35%;left:5%;
    }
    .content .success input
    {
     border-color: #0cc477;
    }

    .content .error input
    {
     border-color:rgb(193,17,25);
    }
    .two.error input:focus,.last .error input:focus
    {
    outline: none;
    }
}

@media screen and (max-width:992px)
{
    #carousel-btn1
    {
    background-color:rgba(255,255,255,0.1);
    border: 2px solid rgba(255,255,255,0.1);
    border-radius: 50px;height:4.8rem;
    width:1.5rem;position:absolute;top:35%;right:2%;
    }
    #carousel-btn
    {
    background-color:rgba(255,255,255,0.1);
    border: 2px solid rgba(255,255,255,0.1);
    border-radius: 50px;
    height:4.8rem;
    width:1.5rem;
    position:absolute;top:35%;left:5%;
    }
    .slide .row
    {
        margin:20px 70px;
    }
    .last input
    {
    height:50px;
    width: 320px;
    padding:1rem;
    background: transparent;
    font-size: 1rem;
    line-height: 1.5rem;
    border: 0.1px solid #b6b4b4;
    color: #fff;
    border-radius:5px ;
    }
    .last button
    {
    background-color:rgb(229,9,20);
    color: #fff;
    height: 50px;
    width: 160px;
    border-radius: 5px;
    border: none;outline: 0;
    font-size: 20px;
    margin-left: 0.5rem;
    }
    .last
    {
        margin-left:200px ;
    }  
}

@media screen and (max-width:768px)
{
    .content .one h1
    {
        font-size: 45px;
    }
    .content .one p
    {
        font-size: 18px;
    }
    .content .two p
    {
        font-size:16px;
    } 
    main .content
    {
        text-align: center;
        padding:5px;
    }
    #error
    {
        color: rgb(229,9,20);
        font-size: 14px;
        margin-top: 5px;margin-left: 72px;text-align:left;
    }

    #carousel-btn
    {
    background-color:rgba(255,255,255,0.1);
    border: 2px solid rgba(255,255,255,0.1);
    border-radius: 50px;
    height:5.5rem;
    width:1.5rem;
    position:absolute;top:35%;left:5%;
    }
   
    #carousel-btn1
    {
    background-color:rgba(255,255,255,0.1);
    border: 2px solid rgba(255,255,255,0.1);
    border-radius: 50px;height:5.5rem;
    width:1.5rem;position:absolute;top:35%;right:6%;
    }

    .content .two button
    {
        width: 120px;
        height: 30px;
        font-size: 18px;
    }
    .content .two input
    {
        width:250px;
        height: 40px;
        margin-top: 25px;
    }
    .last input
    {
        width: 280px;
        margin-bottom:5px;
        height: 40px;
    }
    .last button
    {
        width:100px;
        height: 35px;
        font-size: 16px;
    }
    .last
    {
        margin-left:100px;
    }
    .last #error
    {
        margin-left:0px;
    }
    .last p
    {
        font-size: 14px;
    }
    
    .box4 .row
    {
        display: block;
    }
    .box4 .row .col-3 ul
    {
        margin-bottom: 0;
        padding-bottom: 1px;
    }
    .box4 .media 
    {
        height:100px;
        width:100%;
        display: flex;justify-content: center;align-items: center;
    }
    .box4 .media button
    {
        width:350px;
        height: 30px;
        display: block;
        background-color:rgb(229,9,20);
        color: #fff;
        border-radius: 5px;
        border: none;outline: 0;
        font-size: 19px;
        margin-top: 30px;
    }
    .box4 .para1
    {
       height:20px;
    }
     .box2 .card-1,.box2 .card-2,.box2 .card-3,.box2 .card-4
    {
        height:auto;
        width:auto;
        margin: 10px;
    }
    .box3 .accordion
    {
        margin: 0px 10px;
    }
    .box3 h4
    {
        margin-left: 10px;
        margin-bottom: 20px;
    }
    .box1 .three
    {
    margin-left:15px;
    margin-right:15px;
    padding-top: 30px;
    }
    .box1 .three p
    {
    color: #fff;
    font-size: 18px;
    }
    .box1 .three select
    {
        width: 100%;
        border-radius:5px;
        margin-bottom: 15px;
        font-size: 15px;
    }
    .slide
    {
        display: none;
    }
    .quries
    {
        display:block;
    }
        
}

@media screen and (max-width:576px)

{
    .content .two p
    {
        font-size: 13.8px;
        margin-left: 5px;
    }
    .slide
    {
        display: none;
    }
    .quries
    {
        display: block;
    }
    .last
    {
        margin-left: 25px;
    } 
}

@media screen and (max-width:450px)
{
    .logo
    { 
    position:absolute;
    top:2%;left:5%;
    z-index:999;
    }
    .logo img
    {
        width:75px;
    }
    .menu
    {
        position: absolute;
        top:3%;right:5%;
        z-index:999;
    }
    .menu select
    {
        font-size:13px;
    }
    .content .one h1
    {
        font-size:2.3rem;
    }
    .last input
    {
        width: 190px;
        
    }
    .content .two p
    {
        width: 80%;
        margin-left:50px;
    }
    .content .two input
    {
        width: 200px;
    }
    .content button
    {
        width: 100px;
    }


}