style.css

body {
    margin: 0px;
    direction: rtl;
    font-size: 16px;
}

@font-face {
    font-family: 'MyCustomFont';
    src: url('./font/IRANSansX-Regular.woff') format('woff');
    font-size: 16px;

}

.main-container {
    width: 100%;
    max-width: 1900px;
    margin: 0px auto;
    font-family: 'MyCustomFont';
}


.main-container .back {
    background-image: url(./img/Maskgroup.webp);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    justify-content: center;
    background-color: #F5F5F5;
}

.main-container .back .header{
    display: flex;
    justify-content: space-between;
    padding: 3% 3% 3% 3%;
}


.main-container .back .season {
    display: flex;
    flex-direction: column;
    margin-right: 15%;
}

.main-container .back .text1 {
    font-weight: bold;
    color: #ffffff;
    margin: 0px;
    padding: 0px;
    font-size: 4vw;
    margin-top: 6%;
}

.main-container .back .button1 {
    padding: 0%;
    border-radius: 10px;
    background-color: #bb1613;
    color: #ffffff;
    font-family: 'MyCustomFont';
    padding: 2px 10px;
    border: 0px;
    font-size: 2vw;
}

.main-container .back .button2 {
    padding: 0%;
    border-radius: 10px;
    background-color: #286444;
    color: #ffffff;
    font-family: 'MyCustomFont';
    padding: 2px 18px;
    border: 0px;
    font-size: 2vw;
}


main .first  {
    background-image: url(./img/Rectangle44.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    justify-content: center;
    padding: 20px 0;
}

main .first div {
    justify-content: center;
    align-content: center;
}

main .first div h1 {
    text-align: center;
    font-size: 1.5em;
    color: #bb1613;
}

main .first div p {
    font-size: 1.2em;
    text-align: justify;
    padding: 0 13%;
}


/* main .second {
    display: flex;
    justify-content: center;
    align-content: center;
    padding: 30px 30px;
} */


main .second .secondBac {
    
    display: grid;
    grid-template-columns: repeat(3,1fr);
    justify-content: center;
    align-items: center;
    margin: 2% 4%;
}


/* main .second div {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    justify-content: center;
    align-items: center;
    margin: 2% 4%;
} */

main .second .card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

main .second  p {
    color: #FF0000;
    font-weight: 600;
    text-align: center;
    padding: 0% 13%;
    font-size: 0.9em;
}

main .slogan {
    display: flex;
    justify-content: center;
    align-items: center;
}

main .second .band{
    display: flex;
    justify-content: center;
}

main .second .band .pishgaman {
    font-size: 1.3em;
    color: #000;
    font-weight: bold;
    text-align: center;
}


main .second img {
    width: 100%;
}

main .third  {
    background-image: url(./img/Rectangle44.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    justify-content: center;
    padding: 20px 20px;
}

main .third .text {
    font-size: 1em;
    font-weight: bold;
    text-align: center;
}

main .third a {
    text-decoration: none;
    color: #FF0000;
    font-size: 1.3rem;
}


main .third .form {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    justify-content: center;
    text-align: right;
    padding-right: 10%;
}

main  .third .form input {
    border-radius: 30px;
    border: 1px solid #000;
    width: 65%;
    padding: 10px 10px;
    margin: 2% 2%;
    background-color: #F5F5F5;
    font-family: inherit;
}

main  .third .form .controlContent {
    direction: ltr;
}


main  .third .form select {
    border-radius: 30px;
    border: 1px solid #000;
    width: 65%;
    padding: 10px 10px;
    margin: 2% 2%;
    background-color: #F5F5F5;
    font-family: inherit;
}

main .third .form label {
    font-weight: 600;
    font-size: 0.8em;
    margin-right: 5%;
}

main .third .button4 {
    font-size: 1em;
    border-radius: 30px;
    background-color: #286444;
    color: #ffffff;
    font-family: 'MyCustomFont';
    border: 0px;
    padding: 8px 50px;
    margin-top: 20px;
}

main .third .btn {
    display: flex;
    justify-content: center;
}

main .third .alert-success {
    color: #000000;
    font-size: 0.9em;
    font-weight: 600;
    background-color: #D1ECF1;
    border-color: #d6e9c6;
    margin: 1% 16%;
    border-radius: 15px;
    text-align: center;
}

main .third .alert-success {
    color: #000000;
    font-size: 1em;
    font-weight: 600;
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6;
    margin: 1% 16%;
    padding: 1%;
    border-radius: 15px;
    text-align: center;
}

.alert-danger {
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}

main .Fourth p {
    text-align: center;
    font-size: 1.5em;
    color: #bb1613;
}

main .Fourth img {
    justify-content: center;
    align-content: center;
    width: 80%;
}

main .Fourth .customers {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    justify-content: center;
    align-items: center;
    margin: 3% 6%;
    direction: ltr;
}

main .Fourth div {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 1.5rem;
}


footer {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background-color: #ffffff ;
    margin: 0% 3%;
}

footer p {
    background-color: #bb1613;
    color: #ffffff;
    padding: 1% 10%;
    border-radius: 0px 0px 30px 30px;
    text-align: center;
    font-family: 'MyCustomFont';
}

/* media query */

    .main-container {width: 100%;}

    .main-container  .image1577bw  {width: 10%;}
    .main-container  .logobw  {width: 10%;}
    .main-container .back {height: 1000px;}

    main .first .text1 {background-size: 100% 100%;}
    main .Fourth .image2 {width: 50%;}

    footer p {font-size: 1.3em;}


@media screen and (max-width:1600px){
    .main-container {width: 100%;}

    header .image1577bw  {width: 10%;}
    header .logobw  {width: 10%;}
    .main-container .back {height: 850px;}

    main .first .image1 {width: 80%;}
    main .first .text1

    main .Fourth .image2 {width: 40%;}

    footer p {font-size: 1.3em;}
}
@media screen and (max-width:1200px){
    .main-container {width: 100%;}

    header .image1577bw  {width: 10%;}
    header .logobw  {width: 10%;}
    .main-container .back {height: 700px;}

    main .first .image1 {width: 80%;}

    main .Fourth .image2 {width: 40%;}

    footer p {font-size: 1.3em;}
}

@media screen and (max-width:960px){
    .main-container {width: 100%;}

    header .image1577bw  {width: 10%;}
    header .logobw  {width: 10%;}
    .main-container .back {height: 550px;}
    
    main .first .image1 {width: 80%;}


    main .Fourth .image2 {width: 50%;}

    footer p {font-size: 0.9em;}
}

@media screen and (max-width:720px){
    .main-container {width: 100%;}
    .main-container .back .season .btns {margin-top: 33%;}
    .main-container .back .button1 {font-size: 3vw;}
    .main-container .back .button2 {font-size: 3vw;}


    header .image1577bw {width: 10%;}
    header .logobw {width: 10%;}
    .main-container .back {height: 400px}
    
    main .first .image1 {width: 80%;}

    main .Fourth .image2 {width: 65%;}

    main .third .form {grid-template-columns: repeat(1,1fr);}
    main  .third .form input {width: 85%;}
    main  .third .form select {width: 89%;}
    footer p {font-size: 0.7em;}
}

@media screen and (max-width:480px){
    .main-container {width: 100%;}
    .main-container .back .season .btns {margin-top: 36%;}
    .main-container .back .button1 {font-size: 3vw;}
    .main-container .back .button2 {font-size: 3vw;}


    header .image1577bw {width: 10%;}
    header .logobw {width: 10%;}
    .main-container .back {height: 250px;}
    
    main .first .image1 {width: 80%;}
    main .second .secondBac {grid-template-columns: repeat(2, 1fr);}

    main .Fourth .image2 {width: 65%;}
    main .Fourth .customers {grid-template-columns: repeat(3,1fr);}

    main .third .form {grid-template-columns: repeat(1,1fr);}
    main  .third .form input {width: 85%;}
    main  .third .form select {width: 91%;}
    main .third .form label {margin-right:10px;}
    footer p {font-size: 0.7em;}
}

@media screen and (max-width:300px){
    .main-container {width: 100%;}
    .main-container .back .season .btns {margin-top: 30%;}
    .main-container .back .button1 {font-size: 3vw;}
    .main-container .back .button2 {font-size: 3vw;}


    header .image1577bw {width: 10%;}
    header .logobw {width: 10%;}
    .main-container .back {height: 150px;}
    
    main .first .image1 {width: 80%;}
    main .second .secondBac {grid-template-columns: repeat(2, 1fr);}


    main .Fourth .image2 {width: 65%;}
    main .Fourth .customers {grid-template-columns: repeat(3,1fr);}

    main .third .form {grid-template-columns: repeat(1,1fr);}
    main  .third .form input {width: 85%;}
    main  .third .form select {width: 91%;}
    main .third .form label {margin-right:10px;}

    footer p {font-size: 0.5em;}
}